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.

Component demosComponents APIHooks API

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

disabled

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

Type:boolean

error

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

Type:boolean

filled

If true, the form element has some value.

Type:boolean

focused

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

Type:boolean

onBlur

Callback fired when the form element has lost focus.

Type:() => void

onChange

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

Type:React.ChangeEventHandler<NativeFormControlElement>

onFocus

Callback fired when the form element receives focus.

Type:() => void

required

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

Type:boolean

value

The value of the form element.

Type:unknown