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.

useFormControlContext API

Import

import { useFormControlContext } from '@mui/base/FormControl';
// or
import { useFormControlContext } from '@mui/base';
Learn about the difference by reading this guide on minimizing bundle size.This hook does not accept any input parameters.

Return value

NameTypeDefaultDescription
disabledboolean-

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

errorboolean-

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

filledboolean-

If true, the form element has some value.

focusedboolean-

If true, the form element is focused and not disabled.

onBlur() => void-

Callback fired when the form element has lost focus.

onChangeReact.ChangeEventHandler<NativeFormControlElement>-

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

onFocus() => void-

Callback fired when the form element receives focus.

requiredboolean-

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

valueunknown-

The value of the form element.