Forms
Input
Single-line and multi-line text fields, plus Field and Label for adding a label, helper text and a validation message.
- Source
- src/components/ui/input.tsx
- Figma
- Input · type (text, textarea) × state (default, focus, error, disabled) × size (sm, md, lg) · Leading icon toggle
Usage
Included in the GliaKit boilerplate. Import it where you need it:
import { Input, Textarea, Field, Label } from "@/components/ui/input";When to use
- Use Input for short free text: names, emails, URLs, search queries.
- Use Textarea for longer text such as descriptions, notes and messages.
- Wrap a control in Field to get a consistent label, helper line and error message.
- For picking from a fixed set of options, use Select, Combobox or a radio group.
- For one-time codes, use OTPInput, which handles auto-advance and paste.
Examples
With leading icon
Input has no icon prop. Wrap it in a relative container, position the icon absolutely and pad the input with pl-9.
Error and disabled
Set aria-invalid on the control and pass error to Field, which replaces the helper with a red message.
Sizes
There is no size prop. The default is 36px tall (md); use h-8 for small and h-10 for large.
Textarea
Same styling and states as Input, for longer text. Resizes vertically.
API reference
Input
Extends every native input attribute (type, value, onChange, placeholder, disabled, aria-*). There is no size or icon prop: adjust height with className and position icons yourself.
| Prop | Type | Default | Description |
|---|---|---|---|
| type | React.HTMLInputTypeAttribute | - | Native input type, such as text, email, password or search. |
| aria-invalid | boolean | - | Shows the error style: red border and ring. |
| disabled | boolean | false | Dims the field and blocks pointer events. |
| className | string | - | Merged with the defaults. Use h-8 or h-10 for small and large sizes, pl-9 to make room for a leading icon. |
Textarea
Extends every native textarea attribute. Same styling and states as Input, 80px minimum height, resizable vertically.
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | number | - | Native visible line count. |
| aria-invalid | boolean | - | Shows the error style. |
| disabled | boolean | false | Dims the field and blocks pointer events. |
Field
Layout wrapper: label, control, then helper or error text. Does not spread other props.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | - | Text rendered above the control with Label. |
| helper | string | - | Muted hint rendered below the control. |
| error | string | - | Validation message. Replaces the helper and reads in red. |
| children | React.ReactNode | - | The control: Input, Textarea, a Select trigger and so on. |
| className | string | - | Classes for the wrapping column. |
Label
Extends every native label attribute. Use htmlFor to link it to a control's id.
| Prop | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | - | The id of the control this label names. |
Accessibility
- Input and Textarea are native elements, so keyboard, autofill and form submission work as expected.
- Field's label is not linked to its control (no htmlFor). Give the control an aria-label, or use Label with htmlFor and a matching id.
- Field does not connect helper or error text with aria-describedby. Set aria-invalid on the control so the error state is announced, and keep error text specific.
- A search input with only an icon needs an aria-label, since the placeholder is not a reliable name.
- A 2px focus ring appears on keyboard focus (focus-visible).