Skip to content

Unstyled Input

The Unstyled Input component provides users with a field to enter and edit text.

useInput API

Import

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

Parameters

NameTypeDescription
defaultValueunknown
The default value. Use when the component is not controlled.
disabledboolean
If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.
errorboolean
If true, the input will indicate an error by setting the aria-invalid attribute. The prop defaults to the value (false) inherited from the parent FormControl component.
inputRefReact.Ref<HTMLInputElement>
onBlurReact.FocusEventHandler
onChangeReact.ChangeEventHandler<HTMLInputElement>
onClickReact.MouseEventHandler
onFocusReact.FocusEventHandler
requiredboolean
If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.
valueunknown

Return value

NameTypeDefaultDescription
disabledbooleanfalse
If true, the component will be disabled.
errorbooleanfalse
If true, the input will indicate an error by setting the aria-invalid attribute.
focusedbooleanfalse
If true, the input will be focused.
formControlContextFormControlUnstyledState | undefined
Return value from the useFormControlUnstyledContext hook.
getInputProps<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputInputSlotProps<TOther>
Resolver for the input slot's props.
getRootProps<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputRootSlotProps<TOther>
Resolver for the root slot's props.
requiredbooleanfalse
If true, the input will indicate that it's required.
valueunknown
The value of the input element.