Skip to content
Edit this page
+

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.

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-rootroot

Class applied to the root element.

.Mui-disableddisabledSTATE

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

.Mui-errorerrorSTATE

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

.null-filledfilled

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

.Mui-focusedfocusedSTATE

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

.Mui-requiredrequiredSTATE

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


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