Field

Label, control, description, and error for a single form control — wired to Base UI validation.

Examples

Basic

We never share your email.

In a form

Overview

Field associates labeling and messages with a control. Use FieldControl for a native input, or nest Input, Checkbox, Select, and other controls under the same root name.

tsx

import {
  Field,
  FieldLabel,
  FieldControl,
  FieldDescription,
  FieldError,
} from "@standard-ui/react"

<Field name="email">
  <FieldLabel>Email</FieldLabel>
  <FieldControl type="email" required />
  <FieldDescription>Work email preferred.</FieldDescription>
  <FieldError match="valueMissing">Required.</FieldError>
</Field>

Usage

Anatomy

tsx

Field
  FieldLabel
  FieldControl
  FieldDescription
  FieldItem
  FieldError
  FieldValidity

API

Part	Role
Field	Root name, disabled, and validation.
FieldLabel	Accessible name for the control.
FieldControl	Styled native input; omit to nest other controls.
FieldDescription	Helper text below the control.
FieldError	Error message; use `match` for ValidityState keys.
FieldItem	Row wrapper for checkbox/radio options.

Guidelines

Do

Always provide a FieldLabel (or equivalent aria label)
Pair Field with Form for submit-time validation

Don't

Don't duplicate name on both Field and nested Input
Don't show errors before the user has interacted