InputActionField
A glass-style input field with integrated label, optional icons, avatar, and toggle for action-oriented forms.
Installation
npx chilli@latest add action-inputDefault
Label
helper text
States
Placeholder
helper text
Filled
helper text
Error
helper text
Disabled
helper text
With Toggle
Label
helper text
With Avatar
Label
helper text
Label
helper text
API Reference
ActionInput
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label displayed inside the input container. |
helperText | string | — | Helper text displayed below the input. |
error | string | — | Error message. Applies error styling. |
leftIcon | ReactNode | — | Icon displayed on the left side. |
rightIcon | ReactNode | ChevronRight | Icon displayed on the right side. |
showAvatar | boolean | false | Whether to show an avatar. |
avatarSrc | string | — | Avatar image source. |
showToggle | boolean | false | Whether to show a toggle switch. |
toggleChecked | boolean | false | Controlled toggle state. |
onToggleChange | (checked: boolean) => void | — | Callback when the toggle changes. |
disabled | boolean | false | Whether the input is disabled. |