Input Form ✨
Versatile text input components with labels, tooltips, icons, validation states, and more. Built for forms and user input.
Input Types
Various input field configurations with labels, tooltips, icons, and validation
Mandatory (not label)*
%
$
Supporting text goes here!
Input Sizes
Three size variants: small, default, and large
Input States
Disabled, error, success, and clearable input states
Sounds good!
Basic Text Input
Simple text input component without the field wrapper
Props Reference
| Prop | Type | Description |
|---|---|---|
| id | string | Unique identifier for the input field |
| label | string | ReactNode | Label text for the input field |
| placeholder | string | Placeholder text |
| type | string | Input type (text, password, search, email, etc.) |
| required | boolean | Mark field as required |
| disabled | boolean | Disable the input field |
| hint | string | Tooltip hint text |
| message | string | Supporting text below the input |
| invalidMessage | string | Error message to display |
| icon | ReactNode | Icon element to display inside input |
| valueHint | string | Suffix text (e.g., "%", "$") |
| clearButton | boolean | Show clear button |
| inputClassName | string | Custom CSS classes for input element |