Textarea

Demos

A textarea with a label and placeholder.

Notes for your clinician

"use client"

import { Textarea } from "@workspace/ui/components/textarea"

export function TextareaDemo() {
  return (
    <label className="grid w-full max-w-sm gap-1.5 text-xs font-medium">
      Notes for your clinician
      <Textarea placeholder="Medications, symptoms, or anything we should know before your review." />
    </label>
  )
}

Usage

Use a textarea for free text, such as notes for a clinician or a list of symptoms. For a single line, use an Input.

Import it from @workspace/ui/components/textarea.

Notes

The textarea grows with its content. Set max-h-* in className to cap it, and add resize-y if the reader should resize it.
Wrap it in a label, or link a label with id and htmlFor.
Use the placeholder for an example, not instructions the reader needs once they start typing.

Examples

Disabled

Text the reader can see but not change.

Clinician summary

"use client"

import { Textarea } from "@workspace/ui/components/textarea"

export function TextareaDisabled() {
  return (
    <label className="grid w-full max-w-sm gap-1.5 text-xs font-medium text-muted-foreground">
      Clinician summary
      <Textarea
        disabled
        defaultValue="Lipids have improved since March. Keep the current plan and retest in 6 months."
      />
    </label>
  )
}

Invalid

Set aria-invalid to show an error, and put the message below.

Reason for cancellingPlease add a reason.

"use client"

import { Textarea } from "@workspace/ui/components/textarea"

export function TextareaInvalid() {
  return (
    <label className="grid w-full max-w-sm gap-1.5 text-xs font-medium">
      Reason for cancelling
      <Textarea aria-invalid placeholder="Tell us why you are cancelling." />
      <span className="font-normal text-destructive">Please add a reason.</span>
    </label>
  )
}

Character count

Hold the value in state to show a count against maxLength.

Symptoms0/200

"use client"

import * as React from "react"

import { Textarea } from "@workspace/ui/components/textarea"

const maxLength = 200

export function TextareaWithCount() {
  const [value, setValue] = React.useState("")

  return (
    <label className="grid w-full max-w-sm gap-1.5 text-xs font-medium">
      Symptoms
      <Textarea
        value={value}
        maxLength={maxLength}
        onChange={(event) => setValue(event.target.value)}
        placeholder="Describe how you have been feeling."
      />
      <span className="text-end font-normal text-muted-foreground tabular-nums">
        {value.length}/{maxLength}
      </span>
    </label>
  )
}

Props

Takes every textarea prop. These are the ones you set most often.

Textarea

Prop	Type	Default	Description
`placeholder`	`string`	—	Hint shown when empty.
`defaultValue`	`string`	—	Text on first render.
`value`	`string`	—	Text when controlled.
`onChange`	`(event) => void`	—	Called on every change.
`maxLength`	`number`	—	Most characters allowed.
`disabled`	`boolean`	`false`	Blocks input and dims the field.
`aria-invalid`	`boolean`	—	Shows the error style.