Skip to content

Unstyled Form Control

The Unstyled Form Control component is a utility that lets you associate a form input with auxiliary components, such as labels, error indicators, or helper text.

useFormControlUnstyledContext API

Import

import useFormControlUnstyledContext from '@mui/base/FormControlUnstyled';
// or
import { useFormControlUnstyledContext } from '@mui/base';
You can learn about the difference by reading this guide on minimizing bundle size.

Parameters

NameTypeDefaultDescription

Return value

NameTypeDefaultDescription
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.
onFocus() => void
Callback fired when the form element receives focus.
disabled?booleanfalse
If true, the label, input and helper text should be displayed in a disabled state.
error?booleanfalse
If true, the label is displayed in an error state.
onChange?React.ChangeEventHandler<NativeFormControlElement>
Callback fired when the form element's value is modified.
required?booleanfalse
If true, the label will indicate that the input is required.
value?unknown
The value of the form element.