components / form
Field
Connect label, control, help text, and error with ids and aria attributes.
only to reply to you, no spam.
field-default.tsx
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
export default function FieldDefault() {
return (
<Field className="w-full max-w-xs" validationMode="onBlur">
<FieldLabel>email</FieldLabel>
<Input placeholder="you@example.com" required type="email" />
<FieldDescription>only to reply to you, no spam.</FieldDescription>
<FieldError match="typeMismatch">that email is not valid.</FieldError>
</Field>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/field.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
<Field name="email">
<FieldLabel>email</FieldLabel>
<Input type="email" />
<FieldError />
</Field>API
Field
Base UI · Field.RootGroups the parts. Inside a Form with a schema, it validates by name with no configuration.
| prop | type | default |
|---|---|---|
nameField name. Links the value to the form and to the schema key. | string | - |
validateCustom validation. If provided, it takes priority over the schema. | (value) => string | string[] | null | - |
validationModeWhen to validate. | "onSubmit" | "onBlur" | "onChange" | inherits from Form |
disabled · invalidStates controlled from outside. | boolean | - |
classNameExtra classes, merged with | string | - |
FieldLabel
Base UI · Field.Label<label> linked to the control.
| prop | type | default |
|---|---|---|
classNameExtra classes, merged with | string | - |
FieldDescription
Base UI · Field.DescriptionHelp text, linked through aria-describedby.
| prop | type | default |
|---|---|---|
classNameExtra classes, merged with | string | - |
FieldError
Base UI · Field.ErrorError message. Without match, it shows whatever the validation returns.
| prop | type | default |
|---|---|---|
matchShows only for one kind of error (e.g. | keyof ValidityState | boolean | - |
classNameExtra classes, merged with | string | - |
Accessibility
- The error is added to the control's
aria-describedbyand the field getsaria-invalid. - The label is linked through
for/idautomatically.