Skip to content

Input

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

Introduction

An input is a UI element that accepts text data from the user. The Input component replaces the native HTML <input> tag, and offers expanded customization and accessibility features. It can also be transformed into a <textarea> as needed.

Component

Usage

After installation, you can start building with this component using the following basic elements:

<span class="token keyword">import</span> Input <span class="token keyword">from</span> <span class="token string">'@mui/base/Input'</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Input</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Basics

Input behaves similarly to the native HTML <input>, except that it's nested inside of a root <div>—see Anatomy for details.

The following demo shows how to create and style an input component, including placeholder text:

Anatomy

The Input component is composed of a root <div> slot that houses one interior <input> slot:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MuiInput-root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MuiInput-input<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

Custom structure

Use the slots prop to override the root or any other interior slot:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Input</span></span> <span class="token attr-name">slots</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">root</span><span class="token operator">:</span> <span class="token string">'aside'</span><span class="token punctuation">,</span> <span class="token literal-property property">input</span><span class="token operator">:</span> CustomInput <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>

Use the slotProps prop to pass custom props to internal slots. The following code snippet applies a CSS class called my-input to the input slot:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Input</span></span> <span class="token attr-name">slotProps</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">className</span><span class="token operator">:</span> <span class="token string">'my-input'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>

Usage with TypeScript

In TypeScript, you can specify the custom component type used in the slots.root as a generic parameter of the unstyled component. This way, you can safely provide the custom root's props directly on the component:

<span class="token operator">&lt;</span>Input<span class="token operator">&lt;</span><span class="token keyword">typeof</span> CustomComponent<span class="token operator">></span> slots<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> root<span class="token operator">:</span> CustomComponent <span class="token punctuation">}</span><span class="token punctuation">}</span> customProp <span class="token operator">/</span><span class="token operator">></span>

The same applies for props specific to custom primitive elements:

<span class="token operator">&lt;</span>Input<span class="token operator">&lt;</span><span class="token string">'textarea'</span><span class="token operator">></span> slots<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> root<span class="token operator">:</span> <span class="token string">'textarea'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span> rows<span class="token operator">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span> <span class="token operator">/</span><span class="token operator">></span>

Hook

<span class="token keyword">import</span> useInput <span class="token keyword">from</span> <span class="token string">'@mui/base/useInput'</span><span class="token punctuation">;</span>

The useInput hook lets you apply the functionality of an input to a fully custom component. It returns props to be placed on the custom component, along with fields representing the component's internal state.

Hooks do not support slot props, but they do support customization props.

The demo below shows how to use the useInput hook to create a custom input component that receives all the necessary props:

Customization

Adornments

You can use the startAdornment and endAdornment props to add a prefix, suffix, or an action to an input. Common use cases of adornments include:

  • when an input receives a specific unit of measure (like weight or currency)
  • when an icon button toggles hiding/showing a password

The following demo shows examples of both of these use cases:

kg

Multiline

The multiline prop transforms the <input> field into a <textarea> element, as shown below:

Press Enter to start editing

If you want the <textarea> to grow with the content, you can use the Textarea Autosize component within the input.

When using Textarea Autosize, the height of the <textarea> element dynamically matches its content unless you set the rows prop. To set minimum and maximum sizes, add the minRows and maxRows props.

The following demo shows how to insert a Textarea Autosize component into an Input so that its height grows with the length of the content:

Press Enter to start editing