Field

A component that provides labelling and validation for form controls.

Name

Visible on your profile

import * as React from 'react';
import { Field } from '@base-ui-components/react/field';
import styles from './index.module.css';

export default function ExampleField() {
  return (
    <Field.Root className={styles.Field}>
      <Field.Label className={styles.Label}>Name</Field.Label>
      <Field.Control required placeholder="Required" className={styles.Input} />

      <Field.Error className={styles.Error} match="valueMissing">
        Please enter your name
      </Field.Error>

      <Field.Description className={styles.Description}>
        Visible on your profile
      </Field.Description>
    </Field.Root>
  );
}

API reference

Import the component and place its parts the following way:

Anatomy

import { Field } from '@base-ui-components/react/field';

<Field.Root>
  <Field.Label />
  <Field.Control />
  <Field.Description />
  <Field.Error />
  <Field.Validity />
</Field.Root>

Root

Groups all parts of the field. Renders a <div> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`disabled`	`boolean`	`false`
`invalid`	`boolean`	`undefined`
`name`	`string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`
`validate`	`(value) => string \| string[] \| null \| Promise`	`undefined`
`validationDebounceTime`	`number`	`0`
`validationMode`	`'onBlur' \| 'onChange'`	`'onBlur'`

Attribute	Description
`data-dirty`	Present when the field's value has changed.
`data-disabled`	Present when the field is disabled.
`data-touched`	Present when the field has been touched.

Label

An accessible label that is automatically associated with the field control. Renders a <label> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-dirty`	Present when the field's value has changed.
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is in invalid state.
`data-touched`	Present when the field has been touched.
`data-valid`	Present when the field is in valid state.

Control

The form control to label and validate. Renders an <input> element.

You can omit this part and use any Base UI input component instead. For example, Input, Checkbox, or Select, among others, will work with Field out of the box.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`onValueChange`	`(value, event) => void`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-dirty`	Present when the field's value has changed.
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is in invalid state.
`data-touched`	Present when the field has been touched.
`data-valid`	Present when the field is in valid state.

Description

A paragraph with additional information about the field. Renders a <p> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-dirty`	Present when the field's value has changed.
`data-disabled`	Present when the field is disabled.
`data-invalid`	Present when the field is in invalid state.
`data-touched`	Present when the field has been touched.
`data-valid`	Present when the field is in valid state.

Error

An error message displayed if the field control fails validation. Renders a <div> element.

Prop	Type	Default
`className`	`string \| (state) => string`	`undefined`
`forceShow`	`boolean`	`undefined`
`match`	`\| 'badInput' \| 'customError' \| 'patternMismatch' \| 'rangeOverflow' \| 'rangeUnderflow' \| 'stepMismatch' \| 'tooLong' \| 'tooShort' \| 'typeMismatch' \| 'valid' \| 'valueMissing'`	`undefined`
`render`	`\| React.ReactElement \| (props, state) => React.ReactElement`	`undefined`

Attribute	Description
`data-dirty`	Present when the field's value has changed.
`data-invalid`	Present when the field is in invalid state.
`data-touched`	Present when the field has been touched.
`data-valid`	Present when the field is in valid state.

Validity

Used to display a custom message based on the field’s validity. Requires children to be a function that accepts field validity state as an argument.

Prop	Type	Default
`children`	`(validity) => React.ReactNode`	`undefined`