Skip to content
Edit this page

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
kg

Multiline

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

Press Enter to start editing

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.

Press Enter to start editing

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