Input
A flexible input component for collecting user data, with support for various types, states, and styling options.
Basic Usage
The Input component provides a flexible way to collect user input with various styles and states.
Input Types
The Input component supports various input types with appropriate icons and validation.
States
Inputs can display different states including error, success, required, and disabled.
Email is valid!
Please enter a valid email address
Props
The Input component accepts the following props to customize its behavior and appearance:
labelstringLabel text to display above the input
idstringOptional custom ID for the input. If not provided, a unique ID will be generated
type'text' | 'email' | 'password' | 'search' | 'url' | 'date' | 'number' | 'tel' | 'card'textInput type that determines the behavior and default icon (when withIcon is true)
withIconbooleanfalseWhether to show the default type-specific icon
iconLucideIconCustom icon component to override the default type-specific icon
size'sm' | 'default' | 'lg'defaultControls the size of the input field
variant'default' | 'success'defaultApplies different styles to indicate state
errorbooleanfalseShows error state with red styling and error icon
successbooleanfalseShows success state with green styling and check icon
messagestringMessage to display below the input (for error or success states)
disabledbooleanfalseDisables the input
readOnlybooleanfalseMakes the input read-only
requiredbooleanfalseMarks the input as required
classNamestringAdditional CSS classes