Form Control

The Form Control component is a utility that lets you associate a form input with auxiliary components, such as labels, error indicators, or helper text.

FormControl API

Import

import { FormControl } from '@mui/base/FormControl';
// or
import { FormControl } from '@mui/base';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
children	node \| func	-	The content of the component.
className	string	-	Class name applied to the root element.
disabled	bool	false	If `true`, the label, input and helper text should be displayed in a disabled state.
error	bool	false	If `true`, the label is displayed in an error state.
onChange	func	-	Callback fired when the form element's value is modified.
required	bool	false	If `true`, the label will indicate that the `input` is required.
slotProps	{ root?: func \| object }	{}	The props used for each slot inside the FormControl.
slots	{ root?: elementType }	{}	The components used for each slot inside the FormControl. Either a string to use a HTML element or a component. See Slots API below for more details.
value	any	-	The value of the form element.

The ref is forwarded to the root element.