Field

A component that provides labelling and validation for form controls.

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:

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.

Label

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

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.

Description

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

Error

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

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.