Skip to content
Skip to content

Input

The Input component facilitates the entry of text data from the user.

Introduction

The Input component enhances the functionality of the native HTML <input> tag by providing expanded customization options and accessibilty features.

<Input />

Playground

Basics

import Input from '@mui/joy/Input';

The Input component provides a customizable input field that can be used to collect user information, such as name, email, password, or other types of data.

Press Enter to start editing

Customization

Variants

The Input component supports Joy UI's four global variants: solid (default), soft, outlined, and plain.

Press Enter to start editing

Sizes

The input component comes in three sizes: sm, md (default), and lg:

Press Enter to start editing

Colors

Every palette included in the theme is available via the color prop.

Press Enter to start editing

Form props

You can add standard form attributes such as required and disabled to the Input component:

Press Enter to start editing

Validation

Use the error prop to toggle the error state:

Press Enter to start editing

Decorators

The startDecorator and endDecorator props can be used to add supporting icons or elements to the input. With inputs, decorators are typically located at the top and/or bottom of the input field.

$

Inner HTML input

If you need to pass props to the inner HTML <input>, use slotProps={{ input: { ...props } }}. These props may include HTML attributes such as min, max, and autocomplete.

Press Enter to start editing

Common examples

Newsletter Subscription

CSS variable playground

Play around with the CSS variables available to the Avatar component to see how the design changes. You can use these to customize the component with both the sx prop and the theme.

<Input
  startDecorator={<MailIcon />}
  endDecorator={<Button>Message</Button>}
>

CSS Variables

px

px

px

px

px

px

Accessibility

All inputs should have a descriptive label linked to help users understand its purpose.

The Form Control component automatically generates a unique ID that links the Input with the Form Label and Form Helper Text components:

This is a helper text.
Press Enter to start editing

Alternatively, you can do this manually by targeting the input slot—see inner HTML input for details:

<label htmlFor="unique-id">Label</label>
<Input
  slotProps={{
    input: {
      id: 'unique-id',
    }
  }}
/>

Anatomy

The Input component is composed of a root <div> with an <input> nested inside:

<div class="MuiInput-root">
  <input class="MuiInput-input" />
</div>

Unstyled

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.