Input

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

useInput API

import { useInput } from '@mui/base/useInput';
// or
import { useInput } from '@mui/base';

Name	Type	Description
defaultValue	unknown	The default value. Use when the component is not controlled.
disabled	boolean	If `true`, the component is disabled. The prop defaults to the value (`false`) inherited from the parent FormControl component.
error	boolean	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.
inputRef	React.Ref<HTMLInputElement \| HTMLTextAreaElement>
onBlur	React.FocusEventHandler<HTMLInputElement \| HTMLTextAreaElement>
onChange	React.ChangeEventHandler<HTMLInputElement \| HTMLTextAreaElement>
onClick	React.MouseEventHandler
onFocus	React.FocusEventHandler<HTMLInputElement \| HTMLTextAreaElement>
required	boolean	If `true`, the `input` element is required. The prop defaults to the value (`false`) inherited from the parent FormControl component.
value	unknown

Name	Type	Description
disabled	boolean	If `true`, the component will be disabled.
error	boolean	If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute.
focused	boolean	If `true`, the `input` will be focused.
formControlContext	FormControlState \| undefined	Return value from the `useFormControlContext` hook.
getInputProps	<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputInputSlotProps<ExternalProps>	Resolver for the input slot's props.
getRootProps	<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputRootSlotProps<ExternalProps>	Resolver for the root slot's props.
inputRef	React.RefCallback<HTMLInputElement \| HTMLTextAreaElement> \| null
required	boolean	If `true`, the `input` will indicate that it's required.
value	unknown	The `value` of the `input` element.