Skip to content
← Inventory

Field

Flexible field container that arranges label and content in various orientations. Provides auto-generated IDs to child FieldError and FieldDescription components for aria-describedby linking.

Primary distributor for this finish.

Usage

import { Field, fieldAnatomy, FieldContent, FieldDescription, FieldError, FieldGroup, fieldGroupAnatomy, FieldLabel, fieldVariants, useFieldIds } from "@desk/ui/components/field";

Best practices

  • Set invalid on the Field, not on each control — it cascades aria-invalid to descendant Input/InputGroup and turns the FieldLabel destructive.

  • Compose the documented parts (FieldLabel, FieldContent, FieldError, FieldDescription) so generated ids wire aria-describedby automatically.

  • Use orientation="responsive" for a label-beside-control that collapses to stacked on mobile, rather than duplicating the field per breakpoint.

Props

Field

PropTypeDefaultDescription
orientation"horizontal" | "vertical" | "responsive" | null | undefined
invalidboolean

Marks the field invalid and cascades aria-invalid to descendant inputs.

FieldError

PropTypeDefaultDescription
errors({ message?: string; } | undefined)[]

Also exports

  • constfieldAnatomy
  • componentFieldContent
  • componentFieldDescription
  • componentFieldGroup
  • constfieldGroupAnatomy
  • componentFieldLabel
  • constfieldVariants
  • constuseFieldIds

Anatomy

Field

field

Form field container with label, input, and feedback

FieldLabel

field-label

Accessible label for the field

FieldContent

field-content

Container for input and messages

FieldDescription

field-description

Helper text or instructions

FieldError

field-error

Validation error messages

Composition

Builds on

Label

Used by

Input, InputGroup, SettingsCard