Input

The 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';

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 | HTMLTextAreaElement>

onBlur

Type:React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>

onChange

Type:React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>

onClick

Type:React.MouseEventHandler

onFocus

Type:React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>

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:<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputInputSlotProps<ExternalProps>

getRootProps

Resolver for the root slot's props.

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

inputRef

Type:React.RefCallback<HTMLInputElement | HTMLTextAreaElement> | null

required

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

Type:boolean

value

The value of the input element.

Type:unknown