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.