Input
Text input field component with size and icon options.
1npx purekit add input
1import Input from "@/components/purekit-ui/input/input"
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 |