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 accessibility features.

Customization

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

<Input sx={{ '&:focus-within::before': { boxShadow: '...your custom value' } }} />

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.

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.

CSS variables 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

Common examples

Third-party formatting

The Input component can be integrated with third-party formatting libraries for more complex use cases.

Create an adapter component to get the props from the Input component and map them to the third-party component APIs. Then use that adapter as a value to the slotProps.input.component property of the Joy UI Input.

The demos below illustrate how to do this with two popular libraries.

React imask

react-imask provides the IMaskInput component for complex formatting options.

Label

<FormControl>
  <FormLabel>Label</FormLabel>
  <Input
    value={value}
    onChange={(event) => setValue(event.target.value)}
    placeholder="Placeholder"
    slotProps={{ input: { component: TextMaskAdapter } }}
  />
</FormControl>

<FormControl>
  <FormLabel>Label</FormLabel>
  <Input
    value={value}
    onChange={(event) => setValue(event.target.value)}
    placeholder="Placeholder"
    slotProps={{ input: { component: TextMaskAdapter } }}
  />
</FormControl>

Press Enter to start editing

React number format

react-number-format provides the NumericFormat component for enforcing text formatting that follows a specific number or string pattern.

React number format

<FormControl>
  <FormLabel>React number format</FormLabel>
  <Input
    value={value}
    onChange={(event) => setValue(event.target.value)}
    placeholder="Placeholder"
    slotProps={{
      input: {
        component: NumericFormatAdapter,
      },
    }}
  />
</FormControl>

<FormControl>
  <FormLabel>React number format</FormLabel>
  <Input
    value={value}
    onChange={(event) => setValue(event.target.value)}
    placeholder="Placeholder"
    slotProps={{
      input: {
        component: NumericFormatAdapter,
      },
    }}
  />
</FormControl>

Press Enter to start editing

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:

<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

Use the Base UI Input for complete ownership of the component's design, with no Material UI or Joy UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.

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 submission

Focused ring

Debugging the focus ring

Triggering the focus ring

Label and helper text

Validation

Decorators

Inner HTML input

CSS variables playground

Common examples

Focus outline

Floating label

Underline input

Password meter

Debounced Input

Third-party formatting

React imask

React number format

Accessibility

Anatomy

Unstyled

API