Textarea

Import#

import { Textarea } from '@volue/wave-react';

Examples#

Basic#

Controlled#

It is most common to set up Textarea as a controlled component​, meaning that React state drives its value. To achieve this you must provide value and onChange properties.

With Form Field#

Textarea should be clearly labeled so it's obvious to users what they should enter. Optionally, you may want to connect helper text and/or validation feedback message to the textarea element. Thus it is recommended to wrap textareas with Form Field to create a consistent set of form fields that are accessible to screen reader users.

Placeholder#

Placeholder text provides examples of the type of data a user should enter.

Disabled textarea#

Pass isDisabled prop to the accompanying FormField and it will cascade down to the textarea.

You can also pass isDisabled prop directly to Textarea.

Sizes#

Wave provides two Textarea sizes ‐ medium and small, with the medium size used by default. All sizes are aligned with sizes of other related components like Text Input or Select.

Size inheritance#

Textarea automatically inherits size, when placed inside a FormField component.

Responsive#

Textarea supports responsive syntax for its size property, which means you can change its size based on the viewport.

Multi-sizing#

Wave provides applySizes utility, which lets you specify size "scopes" within your app. All textareas within a scope will share the same size unless overwritten on a per-control basis.

Automatic rows adjustment#

Automatic rows adjustment can be accomplished using the autoResize prop.

API Reference#