Input
Text input field component with size and icon options.
Basic
Simple input field
With Icon
Input with an icon
With Label
Input with label
Sizes
Different input sizes
Main Props
| Name | Type | Default | Description |
|---|---|---|---|
color | 'slate' | 'gray' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'blue' | Color variant of the input |
border | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '1' | Border width |
focusBorder | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '2' | Border width when focused |
shape | 'rounded' | 'square' | 'rounded' | Shape of the input |
shapeLeft | 'rounded' | 'square' | - | Shape of the left side |
shapeRight | 'rounded' | 'square' | - | Shape of the right side |
disabled | boolean | false | Whether the input is disabled |
type | React.HTMLInputTypeAttribute | 'text' | Input type |
iconLeft | React.ReactNode | - | Icon displayed on the left |
iconRight | React.ReactNode | - | Icon displayed on the right |
placeholder | string | '' | Placeholder text |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Size of the input |
disabledSearch | boolean | false | Disable search behavior |
label | string | '' | Label text |
positionLabel | 'top' | 'left' | 'top' | Position of the label |
Class Props
| Name | Type | Default | Description |
|---|---|---|---|
classNameInput | string | '' | CSS class for the input element |
classNameWrapperInput | string | '' | CSS class for the input wrapper |
classNameWrapperIconLeft | string | '' | CSS class for the left icon wrapper |
classNameWrapperIconRight | string | '' | CSS class for the right icon wrapper |
classNameIconLeft | string | '' | CSS class for the left icon |
classNameIconRight | string | '' | CSS class for the right icon |
classNameLabel | string | '' | CSS class for the label |
classNameDisabled | string | '' | CSS class when disabled |
classNameRoot | string | '' | CSS class for the root element |
className | string | '' | Additional CSS classes |