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
TextArea
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
Default
minRows: 5, maxRows: 5
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
Auto resize
View code
Full width
In order to get 100% width, you can specify fullWidth prop to true.
Full width
View code
Disabled state
Disabled
Can't write anything
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.
Invalid state
Description of the input, not necessarily invalid.
View code
Addons
There is built-ins addons TextAreaCharCount component.
Char count addon
0/15
View code
Placeholder
Placeholder will wrap and and display ellipsis when it’s too long
Placeholder ellipsis
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus interdum vulputate. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean mi mi, rutrum quis est vitae, efficitur ultricies eros. Aenean convallis magna felis, sit amet egestas mi mollis at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam fringilla turpis vel molestie vehicula. Mauris congue massa et venenatis lacinia. Cras dapibus nunc sem, et ultrices dui varius ac. Cras quam felis, laoreet nec dictum nec, porttitor a magna. Suspendisse nec neque in leo laoreet placerat. Sed convallis ante id velit volutpat pharetra non a risus.
Duis nibh libero, blandit non ipsum sit amet, semper cursus enim. Nullam mattis dolor quam, at aliquam massa vestibulum ac. In metus libero, interdum ut pulvinar id, fringilla non est. Suspendisse enim leo, pulvinar non tristique lobortis, euismod a risus. Ut efficitur odio sed dolor interdum, ac malesuada nisi aliquet. Fusce porta dolor lacus, quis interdum sem feugiat nec. Nullam porta nulla et metus pharetra, ac dictum arcu finibus.
Aliquam eu elit ut magna lobortis luctus. Phasellus mattis cursus est sed mattis. In egestas dolor orci, eu faucibus arcu aliquet ut. In nec congue dui. Praesent neque neque, condimentum eget dui id, ultricies blandit nibh. Mauris sit amet scelerisque tortor, sit amet consequat quam. Sed non sem et justo laoreet vulputate. Morbi quis eros tincidunt, hendrerit urna vel, lobortis orci. Aenean efficitur mollis nunc, id lacinia risus ullamcorper imperdiet.
Proin eget auctor tortor. Duis blandit tellus sit amet nunc consectetur placerat. Nunc ut arcu in ipsum suscipit dapibus. Vivamus sit amet tincidunt dolor. Quisque ultricies libero mauris, a commodo quam ultricies et. Nunc eget purus id nisl vestibulum tempus. Etiam id condimentum risus, tincidunt semper nisl. Mauris ac felis et dolor tincidunt eleifend. Donec id pellentesque mi. Quisque luctus libero eu quam elementum condimentum. Phasellus iaculis dui a vulputate feugiat. Aliquam auctor eget lectus at imperdiet. Suspendisse tincidunt venenatis odio, ac auctor lorem malesuada ut.
Vivamus neque quam, varius vehicula metus pharetra, pharetra rutrum nunc. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas iaculis fringilla turpis pretium tincidunt. Ut sit amet sem urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ut vehicula nulla, at ultrices ipsum. Mauris non eleifend tellus. Vivamus mi odio, fringilla sed lobortis a, efficitur quis ante. Nullam vitae magna eros. Sed vel risus imperdiet, sagittis quam et, fringilla orci. In malesuada nisl tincidunt turpis vulputate, sit amet tempus quam ultricies. Praesent placerat nibh sed nunc tincidunt, sit amet fermentum elit ultrices. Duis ante metus, tincidunt quis porta in, efficitur volutpat turpis. Sed lacinia tempor nulla. Aliquam euismod nunc at dolor pharetra, gravida fringilla ante aliquet. Donec nibh sem, aliquam nec ligula eu, condimentum luctus lorem.
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 |