Textarea

A multi-line text field that grows with its content.

$ pnpm dlx shadcn@latest add https://dashral.com/r/textarea.json

Message

Your message will be sent to the support team.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/textarea.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/textarea

Usage

example.tsx

1import { Textarea } from "@/components/dashral/textarea"
2
3<Textarea label="Notes" placeholder="Anything we should know?" />

Examples

Reply box

Grows as you type, counts down near the limit, and ⌘/Ctrl + Enter sends.

280

⌘ + Enter to send

API reference

Textarea

Also takes every prop of <textarea>(opens in a new tab).

Prop	Type	Default
`label`	`ReactNode` Shown above, linked to the control.	—
`description`	`ReactNode` A hint under the control.	—
`error`	`boolean \| ReactNode` true shows the error style; a message also shows under the control.	—
`labelAction`	`ReactNode` At the end of the label's row, e.g. a “Forgot password?” link or the current value.	—
`withAsterisk`	`boolean` Marks the label with an asterisk, e.g. alongside required.	`false`
`classNames`	`{ root, label, description, error, textarea }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

With label, description or error, the id, aria-describedby and aria-invalid are wired up for you.
It grows with its content (field-sizing) where browsers support it.