Input
Accessible text input with label, error, and disabled states.
Live Demo
Please enter a valid email address.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Visible label text rendered above the input. |
error | string | — | Error message displayed below the input. |
helperText | string | — | Helper text displayed below the input. |
disabled | boolean | false | Disables the input. |
placeholder | string | — | Placeholder text shown when the input is empty. |
id | string | — | HTML id attribute, used to link the label to the input. |
Usage
import { Input } from '@ghiberti85/ui'
// Default
<Input label="Email" id="email" placeholder="you@example.com" />
// With error
<Input
label="Email"
id="email-error"
placeholder="you@example.com"
error="Please enter a valid email address."
/>
// Disabled
<Input label="Email (disabled)" placeholder="you@example.com" disabled />