Skip to content
Edit this page
+

Input

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

DemosComponents APIHooks API

useInput API

Import

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

Parameters

defaultValue

The default value. Use when the component is not controlled.

Type:

unknown
disabled

If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.

Type:

boolean
error

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.

Type:

boolean
inputRef

Type:

React.Ref<HTMLInputElement>
onBlur

Type:

React.FocusEventHandler
onChange

Type:

React.ChangeEventHandler<HTMLInputElement>
onClick

Type:

React.MouseEventHandler
onFocus

Type:

React.FocusEventHandler
required

If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.

Type:

boolean
value

Type:

unknown

Return value

disabled

If true, the component will be disabled.

Type:

boolean
error

If true, the input will indicate an error by setting the aria-invalid attribute.

Type:

boolean
focused

If true, the input will be focused.

Type:

boolean
formControlContext

Return value from the useFormControlContext hook.

Type:

FormControlState | undefined
getInputProps

Resolver for the input slot's props.

Type:

<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputInputSlotProps<TOther>
getRootProps

Resolver for the root slot's props.

Type:

<TOther extends Record<string, any> = {}>(externalProps?: TOther) => UseInputRootSlotProps<TOther>
inputRef

Type:

React.RefCallback<HTMLInputElement> | null
required

If true, the input will indicate that it's required.

Type:

boolean
value

The value of the input element.

Type:

unknown