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
Location
Used to personalize nearby actions.
States
Location
Used to personalize nearby actions.
Filled
Used to personalize nearby actions.
Error
Enter at least 3 characters.
Disabled
Location is locked for this step.
With Toggle
Notifications
Enable push updates for new activity.
With Avatar
Assigned to
Tag the owner of this action.
Assigned to
Tag the owner of this action.
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. |