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	Default	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	Default	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.