Field

Fields represent an individual section of a form containing an associated control and label, as well as any description or validation messages.

FieldControl API

import * as Field from '@base_ui/react/Field';
const FieldControl = Field.Control;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use FieldControl to change the default props of this component with the theme.

import * as Field from '@base_ui/react/Field';
const FieldDescription = Field.Description;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use FieldDescription to change the default props of this component with the theme.

import * as Field from '@base_ui/react/Field';
const FieldError = Field.Error;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
forceShow	bool	Determines whether the error message should be shown regardless of the field's client validity.
render	element \| func	A function to customize rendering of the component.
show	'badInput' \| 'customError' \| 'patternMismatch' \| 'rangeOverflow' \| 'rangeUnderflow' \| 'stepMismatch' \| 'tooLong' \| 'tooShort' \| 'typeMismatch' \| 'valid' \| 'valueMissing'	Determines whether the error message should be shown when it matches a given property of the field's `ValidityState`.

The ref is forwarded to the root element.

You can use FieldError to change the default props of this component with the theme.

import * as Field from '@base_ui/react/Field';
const FieldLabel = Field.Label;

Props of the native component are also available.

Name	Type	Description
className	func \| string	Class names applied to the element or a function that returns them based on the component's state.
render	element \| func	A function to customize rendering of the component.

The ref is forwarded to the root element.

You can use FieldLabel to change the default props of this component with the theme.

import * as Field from '@base_ui/react/Field';
const FieldRoot = Field.Root;

Props of the native component are also available.

Name	Type	Default	Description
className	func \| string	-	Class names applied to the element or a function that returns them based on the component's state.
invalid	bool	-	Determines if the field is forcefully marked as invalid.
render	element \| func	-	A function to customize rendering of the component.
validate	func	-	Function to custom-validate the field's value. Return a string or array of strings with error messages if the value is invalid, or `null` if the value is valid. The function can also return a promise that resolves to a string, array of strings, or `null`.
validateDebounceTime	number	0	The debounce time in milliseconds for the `validate` function in the `change` phase.
validateOnChange	bool	false	Determines if validation should be triggered on the `change` event, rather than only on commit (blur).

The ref is forwarded to the root element.

You can use FieldRoot to change the default props of this component with the theme.

import * as Field from '@base_ui/react/Field';
const FieldValidity = Field.Validity;

Props of the native component are also available.

Name	Type	Description

The component cannot hold a ref.