TextArea

import { TextArea } from '@enmovil/ui-design-system';

A multi-line text input. Its height can be fixed with rows or follow the content with autoSize, and it can show a character count and a clear button.

Properties

Property	Type	Required	Default	Allowed values	Description
className	string	No	—	—	Extra CSS class added to the wrapper around the text area, not to the text area itself.
status	string	No	—	'', 'error', 'warning'	Validation state of the field: error shows the error border, warning the warning border. Without it the field has its normal border.
variant	string	No	—	'outlined', 'filled', 'borderless', 'underlined'	Visual style: outlined (the default), filled, borderless or underlined. Only outlined carries the design-system styling.
style	CSSProperties	No	—	—	Inline styles of the text area, for example { resize: "none" } to stop manual resizing.
defaultValue	string | number | readonly string[]	No	—	—	Initial text when the field is uncontrolled.
disabled	boolean	No	—	—	Greys out the field and stops it from being focused or edited.
maxLength	number	No	—	—	Maximum number of characters the field accepts. With showCount, the count is shown against this limit.
placeholder	string	No	—	—	Text shown while the field is empty.
allowClear	boolean | { clearIcon?: ReactNode; }	No	—	—	Shows a clear icon once the field has a value. Clicking it empties the field.
showCount	boolean | { formatter: ShowCountFormatter; }	No	—	—	Shows the number of characters typed below the field, out of maxLength when one is set.
rows	number	No	—	—	Number of text lines the field is tall. autoSize takes over when it is set.
autoSize	boolean | AutoSizeType	No	—	—	Makes the height follow the content. Pass true, or { minRows, maxRows } to keep the height between two line counts.

Other attributes

TextArea passes 288 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onFocus	FocusEventHandler<HTMLTextAreaElement>	Fires when the field receives focus.
onBlur	FocusEventHandler<HTMLTextAreaElement>	Fires when the field loses focus. Use it for validate-on-blur.
onChange	ChangeEventHandler<HTMLTextAreaElement>	Fires on every edit.
onKeyDown	KeyboardEventHandler<HTMLTextAreaElement>	Fires on every key press, e.g. for Ctrl+Enter to submit.
onPressEnter	KeyboardEventHandler<HTMLTextAreaElement>	Fires when Enter is pressed. Enter still inserts a newline.

Children

TextArea does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.

Loading playground…

Storybook

Open TextArea in Storybook to try every story with the full set of controls.