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.Control />
  <Field.Label />
  <Field.Description />
  <Field.Error />
  <Field.Validity />
</Field.Root>

Root

The foundation for building custom-styled fields.

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'`

Label

A label for the field's control.

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

Description

A description message for the field's control.

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

Error

Displays error messages for the field's control.

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`

Control

The field's control element. This is not necessary to use when using a native Base UI input component (Checkbox, Switch, NumberField, Slider, Radio Group etc).

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

Validity

Render prop component that provides the field's validity state and value to its children.

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