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';

Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

Name	Type	Default	Description
autoComplete	string	-	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.
autoFocus	bool	-	If `true`, the `input` element is focused during the first mount.
className	string	-	Class name applied to the root element.
defaultValue	any	-	The default value. Use when the component is not controlled.
disabled	bool	-	If `true`, the component is disabled. The prop defaults to the value (`false`) inherited from the parent FormControl component.
endAdornment	node	-	Trailing adornment for this input.
error	bool	-	If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `baseui--error` class on the root element. The prop defaults to the value (`false`) inherited from the parent FormControl component.
id	string	-	The id of the `input` element.
maxRows	number	-	Maximum number of rows to display when multiline option is set to true.
minRows	number	-	Minimum number of rows to display when multiline option is set to true.
multiline	bool	false	If `true`, a `textarea` element is rendered.
name	string	-	Name attribute of the `input` element.
placeholder	string	-	The short hint displayed in the `input` before the user enters a value.
readOnly	bool	-	It prevents the user from changing the value of the field (not from interacting with the field).
required	bool	-	If `true`, the `input` element is required. The prop defaults to the value (`false`) inherited from the parent FormControl component.
rows	number	-	Number of rows to display when multiline option is set to true.
slotProps	{ input?: func \| object, root?: func \| object }	{}	The props used for each slot inside the Input.
slots	{ input?: elementType, root?: elementType, textarea?: elementType }	{}	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.
startAdornment	node	-	Leading adornment for this input.
type	'button' \| 'checkbox' \| 'color' \| 'date' \| 'datetime-local' \| 'email' \| 'file' \| 'hidden' \| 'image' \| 'month' \| 'number' \| 'password' \| 'radio' \| 'range' \| 'reset' \| 'search' \| 'submit' \| 'tel' \| 'text' \| 'time' \| 'url' \| 'week'	'text'	Type of the `input` element. It should be a valid HTML5 input type.
value	any	-	The value of the `input` element, required for a controlled component.

The ref is forwarded to the root element.

Slots

To learn how to customize the slot, check out the Overriding component structure guide.

Slot name	Class name	Default component	Description
root	.base-Input-root	`'div'`	The component that renders the root.
input	.base-Input-input	`'input'`	The component that renders the input.
textarea		`'textarea'`	The component that renders the textarea.

CSS classes

These class names are useful for styling with CSS. They are applied to the component's slots when specific states are triggered.

Class name	Description
.base--disabled	State class applied to the root element if `disabled={true}`.
.base--error	State class applied to the root element if `error={true}`.
.base--focused	State class applied to the root element if the component is focused.
.base-Input-adornedEnd	Class name applied to the root element if `endAdornment` is provided.
.base-Input-adornedStart	Class name applied to the root element if `startAdornment` is provided.
.base-Input-formControl	Class name applied to the root element if the component is a descendant of `FormControl`.
.base-Input-inputMultiline	Class name applied to the input element if `multiline={true}`.
.base-Input-inputTypeSearch	Class name applied to the input element if `type="search"`.
.base-Input-multiline	Class name applied to the root element if `multiline={true}`.