Input
formText input with label, helper text, error state, and optional icon adornments. Animated focus ring.
import { Input } from '@/components/forge'Preview
Input
Try button, modal, or tabs
This username is taken
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
label | string | - | No | Visible label above the input |
helperText | string | - | No | Helper text shown below the input |
error | string | - | No | Error message - replaces helper text and applies error styling |
iconLeft | React.ReactNode | - | No | Icon element rendered on the left side |
iconRight | React.ReactNode | - | No | Icon element rendered on the right side |
type | string | 'text' | No | HTML input type |
Variants
defaulterror
Accessibility
- Label is always associated with input via htmlFor
- Error message is linked via aria-describedby
- Error state adds aria-invalid="true"