Unstyled input

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

Features:

• ✨ Supports start and end adornments
• 🚀 Can be transformed to <textarea> using the multiline prop
• ♿️ Adds the appropriate ARIA roles automatically

Basic input

import InputUnstyled from '@mui/base/InputUnstyled';

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 kilograms or currency)
• when an icon button toggles hiding/showing a password

Multiline

The multiline prop transforms the <input> field into a <textarea> element.

If you want the <textarea> to grow with the content, you can use the TextareaAutosize component. When using TextareaAutosize, the height of the <textarea> element dynamically matches its content, unless the rows prop is set. To set minimum and maximum sizes, add the minRows and maxRows props.

The useInput hook

import { useInput } from '@mui/base/InputUnstyled';

The useInput hook lets you use the functionality of InputUnstyled in other components. It returns props to be placed on a custom input and root elements, along with fields representing the internal state of the input.

API

• <InputUnstyled />