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.

children

The content of the component.

Type:node
| func


className

Class name applied to the root element.

Type:string


disabled

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

Type:bool

Default:false


error

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

Type:bool

Default:false


onChange

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

Type:func


required

If true, the label will indicate that the input is required.

Type:bool

Default:false


slotProps

The props used for each slot inside the FormControl.

Type:{ root?: func
| object }

Default:{}


slots

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.

Type:{ root?: elementType }

Default:{}


value

The value of the form element.

Type:any



The ref is forwarded to the root element.

CSS

.null-root

Class applied to the root element.

Rule name:root


.Mui-disabledSTATE

State class applied to the root element if disabled={true}.

Rule name:disabled


.Mui-errorSTATE

State class applied to the root element if error={true}.

Rule name:error


.null-filled

State class applied to the root element if the inner input has value.

Rule name:filled


.Mui-focusedSTATE

State class applied to the root element if the inner input is focused.

Rule name:focused


.Mui-requiredSTATE

State class applied to the root element if required={true}.

Rule name:required



You can override the style of the component using one of these customization options: