Textarea

import { Field, FieldDescription, FieldLabel } from "@hel/ui/field"
import { Textarea } from "@hel/ui/textarea"

When to use it#

Use a textarea when the answer is more than a line: a message, a bio, feedback, a note. For a single line, use a normal input with Field.

It looks like the other inputs in the library: the same border, hover, focus and error ring.

Import#

Copyimport { Textarea } from "@hel/ui/textarea"

Usage#

Put a textarea inside a Field to give it a label, a description and an error. It then takes the field's invalid and disabled state on its own.

Copy<Field>
  <FieldLabel>Feedback</FieldLabel>
  <Textarea placeholder="Be as specific as you like" />
</Field>

It is three rows tall by default. minRows changes that. Text taller than the box scrolls, and the handle in the corner lets people drag it taller. Use resize="none" to remove the handle.

Examples#

Character count#

showCount adds a small count at the top corner of the box. It stays in place while the text scrolls. With maxLength it reads like 29 / 160, the browser stops typing at the limit, and the count turns red when the limit is reached. Without maxLength it only counts.

import * as React from "react"

import { Field, FieldHelperText, FieldLabel } from "@hel/ui/field"

Growing with the text#

autoGrow makes the textarea grow as people type, so nothing is hidden, and shrink again when they delete. minRows is the least it shows. maxRows is where it stops growing and starts to scroll, which keeps a long comment from pushing the rest of the page away. The resize handle is off while autoGrow is on.

import { Field, FieldLabel } from "@hel/ui/field"
import { Stack } from "@hel/ui/stack"
import { Textarea } from "@hel/ui/textarea"

States#

An invalid Field turns the border and the ring red, and its FieldHelperText is shown in red as well. A disabled field dims the textarea and cannot be edited.

import { Field, FieldHelperText, FieldLabel } from "@hel/ui/field"
import { Stack } from "@hel/ui/stack"
import { Textarea } from "@hel/ui/textarea"

Props#

className goes to the textarea itself, and containerClassName to the bordered box around it. It also takes the props of a normal textarea, such as placeholder, maxLength, value and onChange, except rows, which minRows replaces.