Field
Documentation Index
Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.
A component that provides labelling and validation for form controls.
Overview
Use Field to wrap a form control with a label, description, validation message, and disabled or invalid state.
Field keeps form layout consistent and helps connect supporting text to the control.
Anatomy
A field usually includes a label, control, description, and error message. The control can be an input, textarea, select, checkbox, radio group, slider, switch, combobox, or custom form element.
Behavior
Use required, disabled, invalid, and validity states to match the real form state. Keep validation messages close to the control they explain.
Accessibility
Field is most useful when it connects labels, descriptions, and errors in a way screen readers can understand. Use clear labels and specific error messages.
Installation
npx honestui@latest add fieldUsage
import {
Field,
FieldControl,
FieldDescription,
FieldError,
FieldLabel,
FieldValidity,
} from "@/components/ui/field"<Field>
<FieldLabel>Name</FieldLabel>
<FieldControl type="text" placeholder="Enter your name" />
<FieldDescription>Visible on your profile</FieldDescription>
<FieldError>Please enter a valid name</FieldError>
<FieldValidity>
{(validity) => (
{validity.error && <p>{validity.error}</p>}
)}
</FieldValidity>
</Field>Examples
Our examples cover Field with required, disabled, error, validity, and many different form controls.
Required Field
Disabled Field
With Error
Enter an invalid email address and press enter to see the error.