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.

Open Preview

Input Types

The Input component supports various input types with appropriate icons and validation.

Open Preview

States

Inputs can display different states including error, success, required, and disabled.

Open Preview

Email is valid!

Please enter a valid email address

Props

The Input component accepts the following props to customize its behavior and appearance:

Prop
Type
Default
Description
label
string
—

Label text to display above the input

id
string
—

Optional custom ID for the input. If not provided, a unique ID will be generated

type
'text' | 'email' | 'password' | 'search' | 'url' | 'date' | 'number' | 'tel' | 'card'
text

Input type that determines the behavior and default icon (when withIcon is true)

withIcon
boolean
false

Whether to show the default type-specific icon

icon
LucideIcon
—

Custom icon component to override the default type-specific icon

size
'sm' | 'default' | 'lg'
default

Controls the size of the input field

variant
'default' | 'success'
default

Applies different styles to indicate state

error
boolean
false

Shows error state with red styling and error icon

success
boolean
false

Shows success state with green styling and check icon

message
string
—

Message to display below the input (for error or success states)

disabled
boolean
false

Disables the input

readOnly
boolean
false

Makes the input read-only

required
boolean
false

Marks the input as required

className
string
—

Additional CSS classes