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.

Bundle size

Basics

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

<Input placeholder="Type in here…" />

<Input placeholder="Type in here…" />

Press Enter to start editing

Customization

Variants

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

<Input placeholder="Type in here…" variant="solid" />
<Input placeholder="Type in here…" variant="soft" />
<Input placeholder="Type in here…" variant="outlined" />
<Input placeholder="Type in here…" variant="plain" />

<Input placeholder="Type in here…" variant="solid" />
<Input placeholder="Type in here…" variant="soft" />
<Input placeholder="Type in here…" variant="outlined" />
<Input placeholder="Type in here…" variant="plain" />

Press Enter to start editing

Sizes

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

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

Press Enter to start editing

Colors

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

<Input placeholder="Type in here…" variant="outlined" color="primary" />
<Input placeholder="Type in here…" variant="outlined" color="neutral" />
<Input placeholder="Type in here…" variant="outlined" color="danger" />
<Input placeholder="Type in here…" variant="outlined" color="warning" />

<Input placeholder="Type in here…" variant="outlined" color="primary" />
<Input placeholder="Type in here…" variant="outlined" color="neutral" />
<Input placeholder="Type in here…" variant="outlined" color="danger" />
<Input placeholder="Type in here…" variant="outlined" color="warning" />

Press Enter to start editing

Form props

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

<form
  onSubmit={(event) => {
    event.preventDefault();
  }}
>
  <Input
    placeholder="Try to submit with no text!"
    required
    sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
  />
  <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
  <Button type="submit">Submit</Button>
</form>

<form
  onSubmit={(event) => {
    event.preventDefault();
  }}
>
  <Input
    placeholder="Try to submit with no text!"
    required
    sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
  />
  <Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
  <Button type="submit">Submit</Button>
</form>

Press Enter to start editing

Validation

To toggle the error state, use the error prop.

<Input placeholder="Type in here…" error defaultValue="Oh no, error found!" />

<Input placeholder="Type in here…" error defaultValue="Oh no, error found!" />

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 } }}.

<Input
  type="number"
  defaultValue={2.5}
  slotProps={{
    input: {
      min: 1,
      max: 5,
      step: 0.1,
    },
  }}
/>

<Input
  type="number"
  defaultValue={2.5}
  slotProps={{
    input: {
      min: 1,
      max: 5,
      step: 0.1,
    },
  }}
/>

Press Enter to start editing

Common examples

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

--Input-radius

--Input-gap

--Input-placeholderOpacity

--Input-focusedThickness

--Input-minHeight

--Input-paddingInline

--Input-decorator-childHeight

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:

Label

This is a helper text.

<FormControl>
  <FormLabel>Label</FormLabel>
  <Input placeholder="Placeholder" />
  <FormHelperText>This is a helper text.</FormHelperText>
</FormControl>

<FormControl>
  <FormLabel>Label</FormLabel>
  <Input placeholder="Placeholder" />
  <FormHelperText>This is a helper text.</FormHelperText>
</FormControl>

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>

Input

Introduction

Playground

Basics

Customization

Variants

Sizes

Colors

Form props

Validation

Decorators

Inner HTML input

Common examples

CSS variables

Accessibility

Anatomy

Unstyled

Input

Introduction

Playground

Basics

Customization

Variants

Sizes

Colors

Form props

Validation

Decorators

Inner HTML input

Common examples

Newsletter Subscription

CSS variables

Accessibility

Anatomy

Unstyled