Input
Component used to get user input in a text field
Input#
Input component is a component that is used to get user input in a text field.
| Attribute | Type | Description | Default |
| asChild | boolean | - | {"value":false} |
| onValueChange | (value: string) => void | - | null |
InputGroup#
Use this wrapper whenever you need a more complex text input. For example if you need to have leading/trailing icons or addons.
| Attribute | Type | Description | Default |
| state | "alert" | "error" | "success" | - | null |
| onClear | () => void | - | null |
| disabled | boolean | - | null |
| readOnly | boolean | - | null |
InputGroup.LeadingAddon#
Add any type of component that will be displayed before the input field.
This provides flexibility to include additional elements, such as buttons or dropdowns, to enhance the user interface and provide clear context or guidance to the user.
| Attribute | Type | Description | Default |
| readOnly | boolean | - | null |
| asChild | boolean | - | null |
| design | "text" | "inline" | "solid" | - | null |
InputGroup.TrailingAddon#
Add any type of component that will be displayed after the input field.
This provides flexibility to include additional elements, such as buttons or dropdowns, to enhance the user interface and provide clear context or guidance to the user.
| Attribute | Type | Description | Default |
| readOnly | boolean | - | null |
| asChild | boolean | - | null |
| design | "text" | "inline" | "solid" | - | null |
InputGroup.LeadingIcon#
Prepend a decorative icon inside the input (to the left).
| Attribute | Type | Description | Default |
| children* | ReactNode | The svg icon that will be wrapped | null |
| label | string | The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to `alt` text for `img` tags. | null |
| size | "current" | "sm" | "md" | "lg" | "xl" | - | null |
| intent | "main" | "alert" | "neutral" | "error" | "success" | "current" | "support" | "accent" | "basic" | "info" | - | null |
InputGroup.TrailingIcon#
Append a decorative icon inside the input (to the right).
This element will be replaced by a status indicator whenever the input is in error/alert/success state.
| Attribute | Type | Description | Default |
| children* | ReactNode | The svg icon that will be wrapped | null |
| label | string | The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to `alt` text for `img` tags. | null |
| size | "current" | "sm" | "md" | "lg" | "xl" | - | null |
| intent | "main" | "alert" | "neutral" | "error" | "success" | "current" | "support" | "accent" | "basic" | "info" | - | null |
InputGroup.ClearButton#
Clears the input value. Only for search inputs. This button will be shown when the user has typed something in the input.
| Attribute | Type | Description | Default |
| aria-label* | string | Defines a string value that labels the current element. | null |