Textarea

Textarea component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.

Introduction

Joy UI's textarea component is built on top of the Base UI TextareaAutoSize component.

Component

After installation, you can start building with this component using the following basic elements:

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

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">function</span> <span class="token function">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Textarea</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Type anything…<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Variants

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

<Textarea name="Solid" placeholder="Type in here…" variant="solid" />
<Textarea name="Soft" placeholder="Type in here…" variant="soft" />
<Textarea name="Outlined" placeholder="Type in here…" variant="outlined" />
<Textarea name="Plain" placeholder="Type in here…" variant="plain" />

<Textarea name="Solid" placeholder="Type in here…" variant="solid" />
<Textarea name="Soft" placeholder="Type in here…" variant="soft" />
<Textarea name="Outlined" placeholder="Type in here…" variant="outlined" />
<Textarea name="Plain" placeholder="Type in here…" variant="plain" />

Press Enter to start editing

Sizes

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

<Textarea size="sm" name="Size" placeholder="Small" />
<Textarea size="md" name="Size" placeholder="Medium" />
<Textarea size="lg" name="Size" placeholder="Large" />

<Textarea size="sm" name="Size" placeholder="Small" />
<Textarea size="md" name="Size" placeholder="Medium" />
<Textarea size="lg" name="Size" 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.

Form props

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

<form
  onSubmit={(event) => {
    event.preventDefault();
  }}
>
  <Textarea
    placeholder="Try to submit with no text!"
    required
    sx={{ mb: 1 }}
  />
  <Textarea placeholder="It is disabled" disabled sx={{ mb: 1 }} />
  <Button type="submit">Submit</Button>
</form>

<form
  onSubmit={(event) => {
    event.preventDefault();
  }}
>
  <Textarea
    placeholder="Try to submit with no text!"
    required
    sx={{ mb: 1 }}
  />
  <Textarea 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:

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

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

<Textarea
  placeholder="Bootstrap"
  minRows={2}
  sx={{
    '--Textarea-focusedInset': 'var(--any, )',
    '--Textarea-focusedThickness': '0.25rem',
    '--Textarea-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">Textarea</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 Textarea's focus ring by simulating user's focus, inspect the Textarea element and toggle the pseudostate panel.

If you inspect the Textarea's root element, with .MuiTextarea-root class, you have to toggle on the :focus-within state.
If you inspect the <input> element, you have to toggle on the :focus state.

Triggering the focus ring

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

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

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

Press Enter to start editing

Validation

To toggle the error state, use the error prop.

<Textarea
  placeholder="Type in here…"
  error
  defaultValue="Oh no! Something is definitely wrong."
/>

<Textarea
  placeholder="Type in here…"
  error
  defaultValue="Oh no! Something is definitely wrong."
/>

Press Enter to start editing

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

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Textarea</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>

Rows

Use the minRows to set the minimum number of lines to show and maxRows to limit the number of lines that users will see.

<Textarea
  placeholder="Type in here…"
  defaultValue="Try to put text longer than 4 lines."
  minRows={2}
  maxRows={4}
/>

<Textarea
  placeholder="Type in here…"
  defaultValue="Try to put text longer than 4 lines."
  minRows={2}
  maxRows={4}
/>

Press Enter to start editing

Decorators

Use the startDecorator and/or endDecorator props to add supporting icons or elements to the textarea. It's usually more common to see textarea components using decorators at the top and bottom.

0 character(s)

Accessibility

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

The FormControl automatically generates a unique id that links the textarea with the FormLabel component:

Label

This is a helper text.

<FormControl>
  <FormLabel>Label</FormLabel>
  <Textarea placeholder="Placeholder" minRows={2} />
  <FormHelperText>This is a helper text.</FormHelperText>
</FormControl>

<FormControl>
  <FormLabel>Label</FormLabel>
  <Textarea placeholder="Placeholder" minRows={2} />
  <FormHelperText>This is a helper text.</FormHelperText>
</FormControl>

Press Enter to start editing

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

<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">Textarea</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">textarea</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>

Common examples

Focus outline

This example shows how to replace the default focus ring appearance with CSS outline.

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

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

Press Enter to start editing

Floating label

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

Label

<Textarea
  slots={{ textarea: InnerTextarea }}
  slotProps={{ textarea: { placeholder: 'A placeholder' } }}
  sx={{ borderRadius: '6px' }}
/>

<Textarea
  slots={{ textarea: InnerTextarea }}
  slotProps={{ textarea: { placeholder: 'A placeholder' } }}
  sx={{ borderRadius: '6px' }}
/>

Press Enter to start editing

Underline input

Comment box

Your comment

Unstyled

API

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

<Textarea />

Textarea

Introduction

Playground

Component

Variants

Sizes

Colors

Form props

Focused ring

Debugging the focus ring

Triggering the focus ring

Validation

Rows

Decorators

Accessibility

Common examples

Focus outline

Floating label

Underline input

Comment box

Unstyled

API