Field

Installation

npx shadcn@latest add @uqudo/field

Installing it also installs Label and Separator, which it depends on.

Usage

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/uqudo/ui/field"

<FieldGroup>
  <Field>
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" type="email" />
    <FieldDescription>We will never share it.</FieldDescription>
    <FieldError errors={[{ message: "Enter a valid email." }]} />
  </Field>
</FieldGroup>

Field works with any control: Input, Textarea, Select, Checkbox, Switch and so on. Set data-invalid="true" on the Field to tint the label red.

Examples

Horizontal

Use orientation="horizontal" for controls that sit next to their label, such as a checkbox or a switch. FieldContent stacks the label and description.

Accept terms and conditions

You agree to our terms of service and privacy policy.

Email notifications

Receive a weekly summary by email.

Error

FieldError accepts an errors array, deduplicates messages and renders a list when there is more than one.

Field set

Group related fields with FieldSet and FieldLegend. FieldSeparator draws a rule between fields, optionally with a label in the middle.

Shipping address

Where should we send your order?

Optional

API Reference

Prop

Type

FieldLabel

Prop

Type

FieldError

Prop

Type

FieldLegend

Prop

Type

FieldSeparator

Prop

Type

Layout helpers

Component	Renders	Notes
`FieldGroup`	`<div>`	Vertical stack of fields with consistent spacing. Container query root.
`FieldSet`	`<fieldset>`	Semantic group for a `FieldLegend` and its fields.
`FieldContent`	`<div>`	Stacks label and description beside a horizontal control.
`FieldTitle`	`<div>`	Label-styled text for when there is no control to point `htmlFor` at.
`FieldDescription`	`<p>`	Muted helper text.

Data attributes

Attribute	Element	Value
`data-slot`	every part	`field`, `field-label`, `field-error`, …
`data-orientation`	`Field`	The resolved `orientation`.
`data-variant`	`FieldLegend`	The resolved `variant`.
`data-content`	`FieldSeparator`	`true` when it has children.

Field

On this page