Skip to content
Components

Field

Flexible field container (Base UI Field.Root) that arranges label and content in various orientations. Its parts wire themselves to the control: FieldLabel gets htmlFor, and FieldDescription/FieldError join the control's aria-describedby.

Primary distributor for this finish.

Usage

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

Best practices

  • Set invalid on the Field, not on each control - it sets aria-invalid on the field's Input/InputGroupInput/Textarea and turns the FieldLabel destructive.

  • Compose the documented parts (FieldLabel, FieldContent, FieldError, FieldDescription) around one control - the label's htmlFor and the control's aria-describedby are wired for you, so there are no ids to pass.

  • 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
classNamestring | undefined

Additional CSS classes to apply.

invalidboolean | undefined

Marks the field invalid and cascades aria-invalid to its control.

FieldError

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

Also exports

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

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

Flex, Label

Used by

Input, InputGroup, SettingsCard, Textarea