Field
A wrapper component for form inputs with labels and validation.
Visible on your profile.
Installation
pnpm dlx shadcn@latest add @columbus/fieldUsage
Field connects a label, a description, and error messages to the control
inside it. You don't need id or htmlFor.
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";
<Field>
<FieldLabel>Name</FieldLabel>
<Input />
<FieldDescription>Visible on your profile.</FieldDescription>
<FieldError>Please enter your name.</FieldError>
</Field>;Columbus controls built on Base UI (Input, Textarea, Checkbox, Radio Group,
Number Field, OTP Field, and more) work inside Field as is. Wrap any other
control in FieldControl.
Required
A FieldError with children shows when the field is invalid. Fields validate
when their form is submitted; set validationMode="onBlur" or "onChange" to
validate sooner.
Pass match to show a message only for one kind of error, like
<FieldError match="valueMissing">.
Custom validation
validate gets the value and returns an error message, a list of messages, or
null. An empty FieldError shows the message.
This is your public handle.
Disabled
You can't change this right now.
Checkboxes and radios
Put the control inside FieldLabel. For a group, render the field as a
Fieldset so the legend names the group. See
Checkbox Group and
Radio Group.
API reference
Each part wraps the matching Base UI Field part and accepts all its props.
| Part | Base UI part | Notes |
|---|---|---|
Field | Field.Root | Vertical stack with a small gap. |
FieldLabel | Field.Label | Dims when the field is disabled. |
FieldDescription | Field.Description | Small, muted text. |
FieldError | Field.Error | Small, red text. |
FieldItem | Field.Item | Wraps one option in a checkbox or radio group. |
FieldControl | Field.Control | Registers a custom control with the field. |
FieldValidity | Field.Validity | Render prop with the field's validity state. |
Most-used Field props:
Prop
Type