Input

Text input with built-in label association using useId(), validation states, and helper text. Accessible by default — aria-invalid and aria-describedby are set automatically.

Preview

Default

With helper text

We'll never share your email.

Error state

This username is already taken.

Success state

Disabled

Usage

jsx

import { Input } from '@/components/ui'

// Default
<Input class="text-sky-300">label="Email" class="text-sky-300">placeholder="you@example.com" />

// With validation
<Input
  class="text-sky-300">label="Username"
  class="text-sky-300">error="Username is already taken."
  class="text-sky-300">defaultValue="isadev"
/>

// Success state
<Input class="text-sky-300">label="Username" success class="text-sky-300">defaultValue="isaramdev" />

Props

Prop	Type	Default	Description
label	string	—	Visible label, correctly associated via useId().
helperText	string	—	Hint text displayed below the field.
error	string	—	Error message. Sets aria-invalid and red border.
success	boolean	false	Green border and checkmark icon.
size	'sm' \| 'md' \| 'lg'	'md'	Controls field size.
required	boolean	false	Adds visual asterisk and required attribute.
disabled	boolean	false	Disables the field.