Textarea

A multi-line text field that grows with its text, with an optional label, helper text and a character counter. It shows when a value passes or fails validation.

Installation

bash
npx @smicolon/fasla-ui@latest add textarea

Run init once per project before adding components. See Installation.

Preview

The driver sees this on arrival.

Variants

It fits on the card.

Write at least 20 characters so we can help.

Notes lock once the order ships.

Optional

We gift-wrap for free.

Height

The field starts 60px tall and grows a line at a time as the text gets longer, so all of it stays in view. Drag the corner to make it taller yourself. A disabled field keeps its height.

Required

Tell us what you ordered, what went wrong and what you would like us to do.

289/1000

Labels and counter

Optional

The driver sees this on arrival.

33/200

Tell us why you are returning the item.

0/200

Props

PropTypeDefaultDescription
status"default" | "success""default"Set to success to mark a value that passed validation.
invalidbooleanfalseMarks the field invalid. aria-invalid does the same.
disabledbooleanfalseDisables the field, dims the whole group and turns off resizing.
labelReactNode—The field's label, linked to the textarea for you.
labelEndReactNode—A short note at the end of the label row, such as Optional.
descriptionReactNode—Helper text under the field. A screen reader reads it with the field.
descriptionEndReactNode—A note at the end of the helper row, usually a character count.
errorReactNode—The message shown in place of description while the field is invalid.
placeholderstring—Text shown while the field is empty.
maxLengthnumber—The most characters the field accepts. Show the count in descriptionEnd.
valuestring—Field value. Use it with onChange.
onChange(event) => void—Called when the text changes.
classNamestring—Extra CSS classes for the field group.

Usage

tsx
"use client"

import * as React from "react"
import { Textarea } from "@/components/ui/textarea"

export function DeliveryNotes() {
  const [notes, setNotes] = React.useState("")
  return (
    <Textarea
      name="notes"
      label="Delivery notes"
      description="The driver sees this on arrival."
      maxLength={200}
      value={notes}
      onChange={(event) => setNotes(event.target.value)}
      descriptionEnd={`${notes.length}/200`}
    />
  )
}