Text Area

A 120px multi-line field with the Input's label and hint, a character counter and a resize glyph. Square, or a 24px-radius curve as a pill.

Field Title

0/200

This is a hint text to help user.Info Here

import { TextArea } from '@orvain/react';
 
<TextArea
  label="Message"
  placeholder="Write your message"
  maxLength={200}
  hint="Keep it short."
  value={message}
  onValueChange={setMessage}
/>

Add an empty Orvain Text Area titled “Field Title”, required, with the placeholder “Placeholder text...”, a 0/200 counter and the hint “This is a hint text to help user.”

Orvain MCPIncluded with the library

When to use#

For text longer than one line: comments, bios, feedback.
With the counter when there is a length limit, so people see it before reaching it.

When not to use

Use an Input for a short single value.

Anatomy#

1Label

Above the field, as for an Input.

2Field

120px tall, radius 16 (24 as a pill), a 1px #e1e1e1 stroke inside, 18px in.

3Counter and resize

Along the bottom edge: characters used out of the limit, and a 12px resize glyph.

4Hint

Below the field.

States#

Default, Hover, Focused

As for the Input.

Filled

The text in #2a2a2a.

Empty + Error, Filled + Error

A red stroke and hint.

Read Only and Disabled

A grey fill without a stroke.

Source#

Preview – final code pending

The Text Area is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

text areas forms