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

You can 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.
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.