Textarea
Updated
Textarea is a native textarea in a 2px ink frame, with its label above. It resizes in height, and hover casts a dithered shadow. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
Shown under the chart as its caption.
import "@/components/dithercharts/controls.css"
import { Textarea } from "@/components/dithercharts/textarea"
<Textarea label="Notes" placeholder="What changed this week?" hint="Shown under the chart as its caption." />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add textarea
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the field, and its accessible name. |
| hint | Type ReactNode | Default – | Help text under the field, read after its label. |
| error | Type ReactNode | Default – | An error under the field; it also marks the field invalid. |