Input

Use an input for a short value such as a name, reference, search query, or email address. Pair it with a visible label in product forms.

Show codeCopy

Import

import { Input } from "@workshop1/ui/components/input"

Types

Pass the native type through for values such as email, number, date, search, and file. Set inputMode when the expected keyboard differs from the semantic type.

Sizes

size="default" is 32px tall. size="sm" is 28px for dense rows, inline edits, and toolbars, matching SelectTrigger size="sm". Never set a height on the input itself.

States

Use disabled when a field cannot be edited in the current state and aria-invalid="true" when validation fails. Keep the user's value and render the validation message beside the field.

Accessibility

Every input needs a label, either visible through a <Label htmlFor> pair or supplied with aria-label for compact examples. Use aria-describedby to connect help and error text.

Best practices

• Use a placeholder as an example, never as the only label.
• Preserve native input semantics and browser affordances.
• Keep input text at least 16px on small screens to avoid browser zoom.