BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Field

Stable
Edit in Studio

Wires a visible label, an optional description and an error message to one form control. Ids, aria-describedby, aria-invalid and validation timing are handled by Base UI Field.

Updated Oct 16, 2026

Rendered with the real component
Light

Owner and name, like acme/design-tokens.

Dark

Owner and name, like acme/design-tokens.

When to use

Use it for

  • Around every Input, Textarea, Select, Combobox, NumberField or Slider that does not take a label prop itself.
  • To show a server-side error next to the right control (error prop, or Form errors by name).
  • description for what the user needs before typing: format, limits, why you ask.

Not for

  • Checkbox and Switch: they carry their own label next to the control.
  • A group of checkboxes or radios: use CheckboxGroup or RadioGroup, which render a fieldset and legend.

Do and don't

Every example is rendered with the real component, so it always matches what ships.

Paste the link from Share, Copy link.

Enter a Figma design link.
Do

Description before, error after

The description answers questions before typing; the error appears under the control, where the eye already is.

Don't

Placeholder as the label

It disappears on the first keystroke and has low contrast. Keep a visible label.

Accessibility

  • The label is a native <label> bound to the control: clicking it focuses the control.
  • description and error are linked through aria-describedby; an error also sets aria-invalid on the control.
  • Errors carry an icon and text, never color alone (WCAG 1.4.1).
  • required shows an asterisk (hidden from screen readers) and sets the native required attribute, which is announced.
  • hideLabel keeps the label for assistive tech; use it only when the context labels the field visually (a search bar with an icon).

Anatomy and tokens

Read from packages/react/src/components/Field/Field.module.css at build time. Every value is a token: open one to see its alias chain in both themes.

16 tokens 5 semantic or component, change with theme and brand 11 from the shared scales

Props

Parsed from the TypeScript types in packages/react/src/components/Field/Field.tsx, so this table cannot drift from the code. It also accepts every native <div> attribute except onChange.

Prop Type Default Description
label required ReactNode none Visible label. Required: placeholders are not labels.
children required ReactNode none The control: Input, Textarea, Select, Combobox, NumberField, Slider.
description ReactNode none Help shown under the label, before the control: format, constraints, privacy notes.
error ReactNode none Error message. When set, the field is invalid and the message is announced through aria-describedby. Leave it unset to show the browser's validation message after a failed submit.
required boolean false Marks the control as required (adds `required` to our controls and a visual marker to the label).
disabled boolean none No description in the code yet.
name string none Name used by Form for submit values and server errors.
validate (value: unknown) => string | string[] | null | undefined | Promise<string | string[] | null | undefined> none Custom validation. Return an error string (or strings) to mark the field invalid.
validationMode 'onSubmit' | 'onBlur' | 'onChange' none When validation runs. Default `onSubmit` (inherits Form).
hideLabel boolean false Visually hide the label (it stays the accessible name). Use only when the context labels the field, like a search bar.

Comes with useFieldContext, each accepting native <div> attributes.

Playground

Change the props and see the real Field update. Controls are generated from the TypeScript props; nothing here changes the system.

Owner and name, like acme/design-tokens.

<Field
  validationMode="onSubmit"
  label="Repository"
  description="Owner and name, like acme/design-tokens."
/>
validationMode

Workbench

For contributors: every state with the accessibility panel, in the component workbench (Storybook). The stories double as visual test fixtures; the guidance on this page is the user documentation (open Field in Storybook) .

Embed Storybook stories here (5)

Loads from https://bridge-storybook.floriangouloubi.com (set STORYBOOK_URL at build time). If Storybook is not running, the frames stay empty.

Default

Invalid

Required

Disabled

AllStates

Changelog

  • New

    Forms: Field (label, description, error wired by Base UI Field) and Input rebuilt on it (prefix, suffix, sizes; label, hint and error props kept). New Textarea (autosize, character count), Select (groups, descriptions), Combobox (filtering, async loading and empty states, multiple with chips), Checkbox (indeterminate, parent), CheckboxGroup, RadioGroup, Switch, Slider (single and range), NumberField (steppers, units) and Form (server errors with a focusable error summary, FormActions footer).

    Unreleased (current version 0.1.0, no release tagged yet) , Oct 17, 2026

All release notes