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.

Component demosComponents APIHooks API

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: