Field

Usage

import {
  Field,
  FieldLabel,
  FieldControl,
  FieldDescription,
  FieldError,
} from '@acronis-platform/ui-react';

Field ties a control to its label, description, and error. Built on Base UI's Field, it wires the for / id / aria-describedby / aria-invalid associations and validity state automatically — no manual plumbing. The structural parts (FieldSet, FieldLegend, FieldGroup, FieldContent, FieldSeparator) compose and group fields.

Pair Field with the bare controls: render a native input through FieldControl (render={<InputBox />}). The self-contained InputText / InputSearch / InputSelect already include their own label/description/error — use those directly instead. Checkbox / Switch self-label too (their own label prop); use Field/FieldSet only to group them.

Design-pending v1, ported from the legacy shadcn-uikit field and rebuilt on Base UI Field.

Examples

A text field with a description, auto-wired to the control:

<Field>
  <FieldLabel>Email</FieldLabel>
  <FieldControl render={<InputBox type="email" />} />
  <FieldDescription>We'll never share your email.</FieldDescription>
</Field>

An invalid field with an error message:

<Field invalid>
  <FieldLabel>Email</FieldLabel>
  <FieldControl render={<InputBox type="email" defaultValue="notanemail" />} />
  <FieldError match>Please enter a valid email address.</FieldError>
</Field>

Group related, self-labeling controls under a legend:

<FieldSet>
  <FieldLegend>Notifications</FieldLegend>
  <FieldGroup>
    <Checkbox label="Product updates" />
    <Checkbox label="Security alerts" />
  </FieldGroup>
</FieldSet>

Lay the label out beside the control:

<Field orientation="horizontal">
  <FieldLabel>Workspace</FieldLabel>
  <FieldControl render={<InputBox />} />
</Field>

API Reference

Field (the root) carries the layout + validation props:

FieldError shows a validation message:

FieldLegend heads a FieldSet:

FieldLabel, FieldControl, FieldDescription, FieldContent, FieldTitle, FieldGroup, and FieldSeparator accept the props of their underlying element (or Base UI Field part) plus className.

FieldLabel, FieldControl, FieldDescription, and FieldError are Base UI Field parts — render them inside a Field (they throw without the Field context). For a group-level heading, use FieldLegend inside a FieldSet, not a bare FieldDescription.