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.