Components
Inputs
Labeled fields, helper text, and validation.
Field states
Always pair inputs with visible labels. Put helper and error text next to the field and connect it with aria-describedby.
Visible to everyone in your workspace.
Enter a complete email address.
View code
import { Field, FieldLabel, FieldDescription } from "@repo/ui/components/ui/field"
import { Input } from "@repo/ui/components/ui/input"
<Field>
<FieldLabel htmlFor="name">Workspace name</FieldLabel>
<Input id="name" aria-describedby="name-hint" />
<FieldDescription id="name-hint">Visible to your team.</FieldDescription>
</Field>