Primitives
Input
Text input with leading / trailing icon slots, size variants, and invalid state.
Basic
<Label htmlFor="email" required>Email</Label>
<Input id="email" type="email" placeholder="you@company.com" leadingIcon={<Mail />} />Sizes
With icons
Invalid
Please enter a valid email.
<Input invalid defaultValue="not-an-email" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sizeVariant | 'sm' | 'md' | 'lg' | 'md' | Control height + font size. |
| invalid | boolean | false | Renders in error state with danger ring. |
| leadingIcon | ReactNode | — | Icon slot inside the input, left side. |
| trailingIcon | ReactNode | — | Icon slot inside the input, right side. |
All other standard <input> attributes forward through.