Input

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

Bundle size

Introduction

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

Basics

<span class="token keyword">import</span> Input <span class="token keyword">from</span> <span class="token string">'@mui/joy/Input'</span><span class="token punctuation">;</span>

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.

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

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

Press Enter to start editing

Customization

Variants

The Input component supports Joy UI's 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 in three sizes: sm, md (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

Every palette included in the theme is available via 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="info" />
<Input placeholder="Type in here…" variant="outlined" color="success" />
<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="info" />
<Input placeholder="Type in here…" variant="outlined" color="success" />
<Input placeholder="Type in here…" variant="outlined" color="warning" />

Press Enter to start editing

Form props

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

<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

Focused ring

Provide these CSS variables to sx prop to control the focused ring appearance:

--Input-focusedInset: the focused ring's position, either inside(inset) or outside(var(--any, )) of the Input.
--Input-focusedThickness: the size of the focused ring.
--Input-focusedHighlight: the color of the focused ring.

<Input
  placeholder="Bootstrap"
  sx={{
    '--Input-focusedInset': 'var(--any, )',
    '--Input-focusedThickness': '0.25rem',
    '--Input-focusedHighlight': 'rgba(13,110,253,.25)',
    '&::before': {
      transition: 'box-shadow .15s ease-in-out',
    },
    '&:focus-within': {
      borderColor: '#86b7fe',
    },
  }}
/>

<Input
  placeholder="Bootstrap"
  sx={{
    '--Input-focusedInset': 'var(--any, )',
    '--Input-focusedThickness': '0.25rem',
    '--Input-focusedHighlight': 'rgba(13,110,253,.25)',
    '&::before': {
      transition: 'box-shadow .15s ease-in-out',
    },
    '&:focus-within': {
      borderColor: '#86b7fe',
    },
  }}
/>

Press Enter to start editing

To get full control of the focused ring, customize the box-shadow of the ::before pseudo element directly

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Input</span></span> <span class="token attr-name">sx</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token string-property property">'&amp;:focus-within::before'</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">boxShadow</span><span class="token operator">:</span> <span class="token string">'...your custom value'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>

Debugging the focus ring

To display the Input's focus ring by simulating user's focus, inspect the Input element and toggle the pseudostate panel.

If you inspect the Input's root element, with .MuiInput-root class, you have to toggle on the :focus-within state.
If you inspect the <input> element, you can toggle with either :focus or :focus-within states.

Triggering the focus ring

To trigger the focus ring programmatically, set the CSS variable --Input-focused: 1.

<Input
  placeholder="Looks like I'm focused but no"
  sx={{ '--Input-focused': 1, width: 256 }}
/>

<Input
  placeholder="Looks like I'm focused but no"
  sx={{ '--Input-focused': 1, width: 256 }}
/>

Press Enter to start editing

Validation

Use the error prop to toggle the error state:

<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

Using the color prop with danger as the value gives you the same result:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Input</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>

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 ref, min, max, and autocomplete.

Common examples

Focus outline

This example shows how to replace the default focus ring (using ::before) with CSS outline.

<Input
  placeholder="Type in here…"
  sx={{
    '&::before': {
      display: 'none',
    },
    '&:focus-within': {
      outline: '2px solid var(--Input-focusedHighlight)',
      outlineOffset: '2px',
    },
  }}
/>

<Input
  placeholder="Type in here…"
  sx={{
    '&::before': {
      display: 'none',
    },
    '&:focus-within': {
      outline: '2px solid var(--Input-focusedHighlight)',
      outlineOffset: '2px',
    },
  }}
/>

Press Enter to start editing

Floating label

To create a floating label input, a custom component (combination of <input> and <label>) is required to replace the default input slot.

Label

<Input
  endDecorator={<CheckCircleOutlined sx={{ color: 'text.tertiary' }} />}
  slots={{ input: InnerInput }}
  slotProps={{ input: { placeholder: 'A placeholder', type: 'password' } }}
  sx={{
    '--Input-minHeight': '56px',
    '--Input-radius': '6px',
  }}
/>

<Input
  endDecorator={<CheckCircleOutlined sx={{ color: 'text.tertiary' }} />}
  slots={{ input: InnerInput }}
  slotProps={{ input: { placeholder: 'A placeholder', type: 'password' } }}
  sx={{
    '--Input-minHeight': '56px',
    '--Input-radius': '6px',
  }}
/>

Press Enter to start editing

Underline input

Password meter

Very weak

CSS variable playground

Play around with the CSS variables available to the Input 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

--Input-radius

--Input-gap

--Input-placeholderOpacity

--Input-focusedThickness

--Input-minHeight

--Input-paddingInline

--Input-decoratorChildHeight

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:

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 this manually by targeting the input slot—see inner HTML input for details:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">htmlFor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>unique-id<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Label<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Input</span></span>
  <span class="token attr-name">slotProps</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
    <span class="token literal-property property">input</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'unique-id'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
<span class="token punctuation">/></span></span>

Anatomy

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

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MuiInput-root<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>MuiInput-input<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

Unstyled

API

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

Input

Introduction

Playground

Basics

Customization

Variants

Sizes

Colors

Form props

Focused ring

Debugging the focus ring

Triggering the focus ring

Validation

Decorators

Inner HTML input

Common examples

Focus outline

Floating label

Underline input

Newsletter Subscription

Password meter

CSS variable playground

Accessibility

Anatomy

Unstyled

API