Skip to content
Edit this page
Skip to content

Input

An input is a UI element that accepts text data from the user.

Introduction

The Input component replaces the native HTML <input> tag, and offers expanded customization and accessibility features.

<Input />

Playground

Basics

import Input from '@mui/joy/Input';
Press Enter to start editing

Customization

Variants

The input component supports the four global variants: solid (default), soft, outlined, and plain.

Press Enter to start editing

Sizes

The input component comes with three sizes out of the box: sm, md (the default), and lg.

Press Enter to start editing

Colors

Toggle the palette that's being used to color the by text field by using the color prop.

Press Enter to start editing

Form props

Standard form attributes are supported e.g. required, disabled, etc.

Press Enter to start editing

Validation

To toggle the error state, use the error prop.

Press Enter to start editing

Note that using the color prop with danger as value gets the same result:

<Input color="danger" />

Decorators

Use the startDecorator and/or endDecorator props to add supporting icons or elements to the input.

It's usually more common to see input components using decorators at the top and bottom.

$

Inner HTML input

To pass any props to the inner HTML <input>, use slotProps={{ input: { ...props } }}.

Press Enter to start editing

Common examples

Newsletter Subscription

CSS variables

Play around with all the CSS variables available in the input component to see how the design changes.

You can use those to customize the component on both the sx prop and the theme.

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

CSS Variables

px

px

px

px

px

px

Accessibility

In order for the input to be accessible, it should be linked to a label.

The FormControl automatically generates a unique id that links the input with the FormLabel and FormHelperText components:

This is a helper text.

Press Enter to start editing

Alternatively, you can do it manually by targeting the input slot:

<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 <input> nested inside.

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

Unstyled