Field and Input

Labels, descriptions, and validation for inputs.

Base UI FieldBase UI InputSource

Basic

Use this for a single line of text, such as a name or an email. Field.Root connects a label, a control, and a description.

Visible to everyone in your organization.

Input without a field

Import Input from components/UI/Input when there is no visible label. It has the same style as Field.Control. Give it an aria-label.

Validation

Type an invalid email, then press Tab. validationMode="onBlur" checks the field when it loses focus.

Sizes

Use md by default, and match the size of the buttons beside the field. Use lg only for a single hero field, such as a newsletter sign-up. sm, md, and lg are 26, 36, and 44 pixels high.

sm · dense UI
md · default
lg · hero field

States

Use inset by default. Use line for light or inline editing, such as renaming in place, filters, and quick settings. Use one appearance per form. Set invalid or disabled on Field.Root for the other states.

inset · forms
A project with this name already exists.
line · inline editing
A project with this name already exists.

Usage

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

  • A field outside a Form validates only on submit, so it never shows errors. Put it in a form, or set validationMode to "onBlur" or "onChange".
  • Field.Error without match shows the browser message. Set match to a validity key, such as valueMissing, to write your own message.
  • For a search box, use SearchInput.

API

Props that the library adds. Every part also takes all the Base UI props.

Field.Control

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Sets the text size, padding, and control height.
appearance'inset' | 'line''inset'Sets the field shape. Keep inset for forms. Use line for light or inline editing, such as renaming in place, filters, and quick settings.

Input

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Sets the text size, padding, and control height.
appearance'inset' | 'line''inset'Sets the field shape. Keep inset for forms. Use line for light or inline editing, such as renaming in place, filters, and quick settings.