Input Component

The Input component provides a flexible and accessible way to capture user input in forms. With support for different styles, sizes, and states, it adapts to various design requirements while maintaining consistency.

Key Features

• Multiple Variants: Choose between default and underline styles

• Flexible Sizing: Three size options to match your design

• Built-in Validation: Support for required fields and error states

• Accessibility: ARIA-compliant with label support

Basic Usage

Create a simple input field with minimal configuration:

1
<Input placeholder="Enter your name" />

Variants

Style Variants

Choose between two distinct visual styles:

1
<Input variant="default" placeholder="Default variant" />
2
<Input variant="underline" placeholder="Underline variant" />

Size Variants

Select from three size options:

1
<Input size="sm" placeholder="Small input" />
2
<Input size="default" placeholder="Default input" />
3
<Input size="lg" placeholder="Large input" />

Form Integration

Labels and Validation

Add labels and validation indicators for better user experience, validation is done when the user has left the input field and the input is invalid:

1
<Input label="Username" placeholder="Enter username" />
2
<Input label="Email" type="email" required placeholder="Enter email" />
3
<Input
4
    label="Password"
5
    required
6
    type="password"
7
    minLength={8}
8
    sublabel="Must be at least 8 characters"
9
    placeholder="Enter password"
10
/>

Input States

Handle different input states gracefully:

1
<Input placeholder="Normal state" />
2
<Input disabled placeholder="Disabled state" />
3
<Input data-state="error" placeholder="Error state" />

Password Input with Show/Hide Toggle

Add a show/hide toggle button for password inputs:

1
<Input
2
    label="Password"
3
    hideInput
4
    placeholder="Enter password"
5
/>

Input Component Props API