Input Floating
Input field with animated floating label.
Outlined
Default outlined style
Underlined
Underlined variant
With Icon
Right icon support
Sizes
Different input sizes
Main Props
| Name | Type | Default | Description |
|---|---|---|---|
color | 'none' | '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 |
disabled | boolean | false | Whether the input is disabled |
type | React.HTMLInputTypeAttribute | 'text' | Input type |
iconRight | React.ReactNode | - | Icon displayed on the right |
placeholder | string | '' | Placeholder text |
label | string | 'Label' | Floating label text |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Size of the input |
variant | 'outlined' | 'underlined' | 'outlined' | Visual style of the input |
Class Props
| Name | Type | Default | Description |
|---|---|---|---|
classNameRoot | string | '' | CSS class for the root element |
classNameLabel | string | '' | CSS class for the label |
classNameInput | string | '' | CSS class for the input element |
classNameWrapperIconRight | string | '' | CSS class for the right icon wrapper |
classNameIconRight | string | '' | CSS class for the right icon |
classNameDisabled | string | '' | CSS class when disabled |
className | string | '' | Additional CSS classes |