Input
The Input component provides users with a field to enter and edit text.
Input API
Import
import { Input } from '@mui/base/Input';
// or
import { Input } from '@mui/base';Props of the native component are also available.
This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it's more like an autofill. You can learn more about it following the specification.
Type:string
If true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component.
Type:bool
If true, the input will indicate an error by setting the aria-invalid attribute on the input and the Mui-error class on the root element. The prop defaults to the value (false) inherited from the parent FormControl component.
Type:bool
It prevents the user from changing the value of the field (not from interacting with the field).
Type:bool
If true, the input element is required. The prop defaults to the value (false) inherited from the parent FormControl component.
Type:bool
The props used for each slot inside the Input.
Type:{ input?: func
| object, root?: func
| object }
Default:{}
The components used for each slot inside the InputBase. Either a string to use a HTML element or a component.
See Slots API below for more details.
Type:{ input?: elementType, root?: elementType, textarea?: elementType }
Default:{}
Type of the input element. It should be a valid HTML5 input type.
Type:'button'
| 'checkbox'
| 'color'
| 'date'
| 'datetime-local'
| 'email'
| 'file'
| 'hidden'
| 'image'
| 'month'
| 'number'
| 'password'
| 'radio'
| 'range'
| 'reset'
| 'search'
| 'submit'
| 'tel'
| 'text'
| 'time'
| 'url'
| 'week'
Default:'text'
ref is forwarded to the root element.To learn how to customize the slot, check out the Overriding component structure guide.
These class names are useful for styling with CSS. They are applied to the root slot when specific states are triggered.
Class name applied to the root element if the component is a descendant of FormControl.