Skip to content
+

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.

NameTypeDefaultDescription
childrennode
| func
-

The content of the component.

classNamestring-

Class name applied to the root element.

disabledboolfalse

If true, the label, input and helper text should be displayed in a disabled state.

errorboolfalse

If true, the label is displayed in an error state.

onChangefunc-

Callback fired when the form element's value is modified.

requiredboolfalse

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.

valueany-

The value of the form element.


The ref is forwarded to the root element.