Field

A high-quality, styled React field component built with @base-ui/react that provides accessible labeling, descriptions, and validation error messages for form controls.

The Field component wraps form controls to handle labels, description messages, and automatic HTML5 validation error matching. It also includes group components for prefix and suffix input attachments.

Usage

import { Field } from "@/components/ui/field";

export function ExampleField() {
  return (
    <Field.Root>
      <Field.Label>Name</Field.Label>
      <Field.Control required placeholder="Required" />
      <Field.Error match="valueMissing">Please enter your name.</Field.Error>
      <Field.Description>Visible on your profile.</Field.Description>
    </Field.Root>
  );
}

With Custom Controls (Textarea, NativeSelect, or Render Prop)

import { Field } from "@/components/ui/field";
import { NativeSelect } from "@/components/ui/native-select";

export function CustomControlsExample() {
  return (
    <Field.Root>
      <Field.Label>Country</Field.Label>
      <Field.Control
        render={
          <NativeSelect defaultValue="us">
            <NativeSelect.Option value="us">United States</NativeSelect.Option>
            <NativeSelect.Option value="ca">Canada</NativeSelect.Option>
          </NativeSelect>
        }
      />

      <Field.Label>Bio</Field.Label>
      <Field.Control render={<textarea placeholder="Write a short bio..." />} />
    </Field.Root>
  );
}

Preview

Username

Visible on your public profile.

Website URL

https://

.com

Enter your website domain address.

Anatomy

import { Field } from "@/components/ui/field";

<Field.Root>
  <Field.Label />
  <Field.Group>
    <Field.Prefix />
    <Field.Control />
    <Field.Suffix />
  </Field.Group>
  <Field.Error />
  <Field.Description />
  <Field.Item />
  <Field.Validity />
</Field.Root>;

API Reference

Field.Root Props

Prop	Type	Default	Description
`name`	`string`	`undefined`	Identifies the field in form submissions.
`disabled`	`boolean`	`false`	Disables user interaction.
`invalid`	`boolean`	`undefined`	Forces invalid state.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant for field and group elements.
`validationMode`	`'onSubmit' \| 'onBlur' \| 'onChange'`	`'onSubmit'`	Determines when field validation is run.

Field.Group Props

Group container for wrapping input with prefix and suffix addons.

Prop	Type	Default	Description
`className`	`string`	`undefined`	Custom CSS class overrides.

Field.Prefix Props

Addon element displayed before the field input.

Prop	Type	Default	Description
`className`	`string`	`undefined`	Custom CSS class overrides.

Field.Suffix Props

Addon element displayed after the field input.

Prop	Type	Default	Description
`className`	`string`	`undefined`	Custom CSS class overrides.

Field.Error Props

Prop	Type	Default	Description
`match`	`ValidityStateKey \| boolean`	`undefined`	Validity state key matching rule to display error message.

Field

On this page