Skip to content
+

Input

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

  • Feedback
  • Bundle size
Component 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 | 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



Edit this page

Was this page helpful?


CheckboxNumber Input

Blog

Store