Textarea API
Demos
For examples and details on the usage of this React component, visit the component demo pages:
Import
import Textarea from '@mui/joy/Textarea';
// or
import { Textarea } from '@mui/joy';
Component name
The nameJoyTextarea
can be used when providing default props or style overrides in the theme.Props
Name | Type | Default | Description |
---|---|---|---|
color | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning' | string | The color of the component. It supports those theme colors that make sense for this component. To learn how to add your own colors, check out Themed components—Extend colors. | |
endDecorator | node | Trailing adornment for this input. | |
error | bool | If true , the input will indicate an error. The prop defaults to the value (false ) inherited from the parent FormControl component. | |
maxRows | number | string | Maximum number of rows to display. | |
minRows | number | string | Minimum number of rows to display. | |
size | 'sm' | 'md' | 'lg' | string | The size of the component. To learn how to add custom sizes to the component, check out Themed components—Extend sizes. | |
startDecorator | node | Leading adornment for this input. | |
sx | Array<func | object | bool> | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
variant | 'outlined' | 'plain' | 'soft' | 'solid' | string | The global variant to use. To learn how to add your own variants, check out Themed components—Extend variants. |
The
ref
is forwarded to the root element.Slots
Name | Default class | Default HTML tag | Description |
---|---|---|---|
root | .MuiTextarea-root | 'div' | The component that renders the root. To learn how to customize the slot, check out the Overriding component structure guide. |
textarea | .MuiTextarea-textarea | 'textarea' | The component that renders the textarea. To learn how to customize the slot, check out the Overriding component structure guide. |
startDecorator | .MuiTextarea-startDecorator | 'div' | The component that renders the start decorator. To learn how to customize the slot, check out the Overriding component structure guide. |
endDecorator | .MuiTextarea-endDecorator | 'div' | The component that renders the end decorator. To learn how to customize the slot, check out the Overriding component structure guide. |