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';
Parameters
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> | |
onBlur | React.FocusEventHandler | |
onChange | React.ChangeEventHandler<HTMLInputElement> | |
onClick | React.MouseEventHandler | |
onFocus | React.FocusEventHandler | |
required | boolean | If true , the input element is required.
The prop defaults to the value (false ) inherited from the parent FormControl component. |
value | unknown |
Return value
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 | <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. |
inputRef | React.RefCallback<HTMLInputElement> | null | |
required | boolean | If true , the input will indicate that it's required. |
value | unknown | The value of the input element. |