The Field component provides a complete form field structure with label, input control, description, validation, and error messaging.
Installation
import {
Field,
FieldLabel,
FieldControl,
FieldDescription,
FieldError,
FieldValidity,
} from "@craftdotui/baseui/components/field";
<Field>
<FieldLabel>Email</FieldLabel>
<FieldControl type="email" placeholder="you@example.com" />
<FieldDescription>We'll never share your email.</FieldDescription>
<FieldError />
</Field>
Components
Field (Root)
Field name for form submission.
Disable the entire field.
Custom validation function.
FieldLabel
Labels the field control.
FieldControl
Size variant from Input component.
Visual variant from Input component.
FieldDescription
Help text for the field.
FieldError
Displays validation error messages.
FieldValidity
Provides programmatic access to validation state.
Examples
Complete Field
<Field>
<FieldLabel>Username</FieldLabel>
<FieldControl placeholder="Enter username" />
<FieldDescription>Choose a unique username.</FieldDescription>
<FieldError />
</Field>
With Validation
<Field
validate={(value) => {
if (!value) return 'Email is required';
if (!value.includes('@')) return 'Invalid email';
return null;
}}
>
<FieldLabel>Email</FieldLabel>
<FieldControl type="email" />
<FieldError />
</Field>
Disabled Field
<Field disabled>
<FieldLabel>Disabled Field</FieldLabel>
<FieldControl value="Cannot edit" />
</Field>
Accessibility
- Built on @base-ui/react for ARIA support
- Automatic label association
- Error announcements to screen readers
- Proper disabled states
- Validation feedback