ComponentSite and product

Textarea

Multi-line text input with hover, focus, invalid, and disabled states.

$ npx context-ds add textarea

On the site

In the product

Usage

Use it for

Notes, prompts, messages.

Avoid

Fixed tiny heights

Example

examples/textarea.tsx

"use client";import { useState } from "react";import { Label } from "@/components/ui/label";import { Textarea } from "@/components/ui/textarea";export function Product() {  const [schema, setSchema] = useState("{ plans: [");  let valid = true;  try { JSON.parse(schema); } catch { valid = false; }  return (    <div className="grid w-full max-w-sm gap-5">      <div className="grid gap-2">        <Label htmlFor="example-prompt">Prompt</Label>        <Textarea id="example-prompt" placeholder="Find the pricing page and list every plan." />      </div>      <div className="grid gap-2">        <Label htmlFor="example-schema">Schema</Label>        <Textarea id="example-schema" value={schema} onChange={(event) => setSchema(event.target.value)} aria-invalid={!valid} aria-describedby="schema-help" />        <p id="schema-help" aria-live="polite" className={`text-caption ${valid ? "text-fg-subtle" : "text-danger"}`}>{valid ? "Valid JSON." : "This isn't valid JSON yet."}</p>      </div>    </div>  );}export function Site() {  return (    <div className="grid w-full max-w-sm gap-2">      <Label htmlFor="example-message">How can we help?</Label>      <Textarea id="example-message" placeholder="Tell us what you're building." />    </div>  );}

Source

components/ui/textarea.tsx

import * as React from "react";import { cn } from "@/lib/utils";// The dashboard's multi-line field (TEXTAREA_CLASS): the input's border and states, fixed in size.function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {  return (    <textarea      data-slot="textarea"      className={cn(        "flex w-full resize-none rounded-control border border-line bg-surface px-3.5 py-2.5 text-body-sm leading-field text-fg transition-[border-color,box-shadow] duration-150 ease-out outline-none placeholder:text-fg-subtle hover:border-line-strong focus:border-brand disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-danger motion-reduce:transition-none",        className,      )}      {...props}    />  );}export { Textarea };

Reference: context-dashboard c0ddf7a src/components/ui/form.tsx.