Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Blogs
All blogsTextArea
Designer doc
TextArea component for multi-line text inputs, such as comments and descriptions.
Example
Basic Usage
Default TextArea have a fix height of 5 rows
View code
Auto-sizing
Set minRows to 1 and maxRows to null to achieve auto-sizing Add css resize vertical, horizontal, both to allow user resize Notice the difference among TextArea style and wrapperProps style
View code
Full width
In order to get 100% width, you can specify fullWidth prop to true.
View code
Disabled state
View code
Invalid state
There are two ways specifying TextArea as invalid: (1) Through Field or (2) directly passing invalid prop to TextArea. If you specify invalid prop to TextArea, it takes higher precedence than the one from enclosing Field‘s.
View code
Addons
There is built-ins addons TextAreaCharCount component.
View code
Placeholder
Placeholder will wrap and and display ellipsis when it’s too long
View code
References
- Ant Design: Input.TextArea
- Material-UI: Textarea Autosize
API
TextArea
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| bottomElement | ReactNode | ||
| defaultValue | string | @deprecated use initialValue | |
| fullWidth | boolean | width: 100% is too troublesome to handle with custom css because of the nesting | |
| initialValue | string | ||
| invalid | boolean | ||
| maxRows | number | Alias for rows. Default is 5. | |
| minRows | number | Maximum number of rows to show. Default is 5. | |
| onTextChange | (val: string) => void | ||
| placeholder | ReactNode | ||
| wrapperProps | WrapperProps |
TextAreaCharCount
| Prop name | Type | Default | Description |
|---|---|---|---|
| as | void | WebTarget | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| forwardedAs | void | WebTarget | ||
| theme | DefaultTheme |