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 of the native component are also available.
Name | Type | Default | Description |
---|---|---|---|
children | node | func | - | The content of the component. |
className | string | - | Class name applied to the root element. |
disabled | bool | false | If |
error | bool | false | If |
onChange | func | - | Callback fired when the form element's value is modified. |
required | bool | false | If |
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. |
value | any | - | The value of the form element. |
ref
is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
Slot name | Class name | Default component | Description |
---|---|---|---|
root | .base-FormControl-root | 'div' | The component that renders the root. |
These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.
Class name | Description |
---|---|
.base--disabled | State class applied to the root element if disabled={true} . |
.base--error | State class applied to the root element if error={true} . |
.base--focused | State class applied to the root element if the inner input is focused. |
.base--required | State class applied to the root element if required={true} . |
.base-FormControl-filled | State class applied to the root element if the inner input has value. |