Mushilu-San UI Textarea
A multi-line text field for longer free-form input.
Selector: textarea[muiTextarea]
import { Textarea } from '@mushilu-san/ui/forms';Loading example…
Overview
<textarea>. Set resize to control whether the user can resize it: vertical by default, none to fix the size, or both.
invalid also sets aria-invalid="true". Link the error message with aria-describedby.
When to use
A comment, description or message that can span several lines. Any free-form text where the length is not known in advance.
When not to use
A single line, such as a name or email. Use an input. Use Input instead.
Examples
Sizes and resize
Loading example…
Guidelines
Do
Show a character count when there is a limit. Keep the default vertical resize so long text can grow.
Don't
Do not disable resizing on a field where users write long text.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
textarea[muiTextarea] | textbox (native) | invalid sets data-invalid and aria-invalid="true". |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| Enter |
Name the textarea with a <label>oraria-label.
API
Textarea
| Name | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Textarea text size and padding: `sm`, `md` or `lg`. Default `md`. |
variant | 'ghost' | 'outline' | 'filled' | 'outline' | Visual style: `outline`, `filled` or `ghost`. Default `outline`. |
resize | 'vertical' | 'none' | 'both' | 'vertical' | Whether the user can resize the textarea: `none`, `vertical` or `both`. Default `vertical`. |
invalid | boolean | false | Shows the failed-validation style and sets `data-invalid`. Also sets `aria-invalid`. Accepts attribute presence, e.g. <… invalid>. |
CSS parts
::part(textarea)
Tokens
--mui-color-surface--mui-color-border--mui-color-text--mui-color-focus-ring--mui-radius-md