ui/components/textarea

Textarea

Terminal-styled multi-line text area with size variants, resize handles that sit outside the scroll area, and a scrollbar that keeps the final line reachable.

Preview

tsx

1 import { Field } from "@/components/ui/field";2 import { Textarea } from "@/components/ui/textarea";3 4 export default function TextareaDefault() {5   return (6     <Field className="w-full max-w-md">7       <Field.Label>Commit message</Field.Label>8       <Field.Control>9         <Textarea10           defaultValue={11             "fix: keep focus above error in field chrome\n\nRing on focus; tint at rest.\n\nScroll to review the full message, or drag the handle below the field to grow it."12           }13         />14       </Field.Control>15       <Field.Description>Scroll inside the field, or drag the handle below it.</Field.Description>16     </Field>17   );18 }19

Installation

$pnpm exec dgadd add ui/textarea

[Installs to]src/components/ui/textarea[Item]ui/textarea

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Field } from "@/components/ui/field";2 import { Textarea } from "@/components/ui/textarea";3 4 export default function TextareaDefault() {5   return (6     <Field className="w-full max-w-md">7       <Field.Label>Commit message</Field.Label>8       <Field.Control>9         <Textarea10           defaultValue={11             "fix: keep focus above error in field chrome\n\nRing on focus; tint at rest.\n\nScroll to review the full message, or drag the handle below the field to grow it."12           }13         />14       </Field.Control>15       <Field.Description>Scroll inside the field, or drag the handle below it.</Field.Description>16     </Field>17   );18 }19

Examples

Resize directions

Preview

tsx

1 import { Field } from "@/components/ui/field";2 import { Textarea } from "@/components/ui/textarea";3 4 const MESSAGE =5   "refactor: move the hunk list into its own panel\nKeeps the diff view readable on narrow terminals.";6 7 export default function TextareaResizeDirections() {8   return (9     <div className="grid w-full max-w-md gap-6">10       <Field>11         <Field.Label>Vertical (default)</Field.Label>12         <Field.Control>13           <Textarea defaultValue={MESSAGE} />14         </Field.Control>15       </Field>16       <Field>17         <Field.Label>Horizontal</Field.Label>18         <Field.Control>19           <Textarea resize="horizontal" defaultValue={MESSAGE} />20         </Field.Control>21       </Field>22       <Field>23         <Field.Label>Both, one handle per edge</Field.Label>24         <Field.Control>25           <Textarea26             resize="both"27             resizeHandle={{ vertical: "box-label", horizontal: "box" }}28             defaultValue={MESSAGE}29           />30         </Field.Control>31       </Field>32       <Field>33         <Field.Label>Fixed</Field.Label>34         <Field.Control>35           <Textarea resize="none" defaultValue={MESSAGE} />36         </Field.Control>37       </Field>38     </div>39   );40 }41

Variants

Preview

tsx

1 import { Field } from "@/components/ui/field";2 import { Textarea } from "@/components/ui/textarea";3 4 // Same two-line message at every size, so the axis you are comparing is the5 // font size and padding — not the content.6 const MESSAGE = "chore: trim the branch list\nDrop merged branches from the picker.";7 8 export default function TextareaVariants() {9   return (10     <div className="flex w-full max-w-sm flex-col gap-4">11       <Field>12         <Field.Label>Small</Field.Label>13         <Field.Control>14           <Textarea size="sm" defaultValue={MESSAGE} />15         </Field.Control>16       </Field>17       <Field>18         <Field.Label>Medium (default)</Field.Label>19         <Field.Control>20           <Textarea size="md" defaultValue={MESSAGE} />21         </Field.Control>22       </Field>23       <Field>24         <Field.Label>Large</Field.Label>25         <Field.Control>26           <Textarea size="lg" defaultValue={MESSAGE} />27         </Field.Control>28       </Field>29       <Field invalid>30         <Field.Label>Error state</Field.Label>31         <Field.Control>32           <Textarea placeholder="Commit message" />33         </Field.Control>34         <Field.Error>A commit message is required.</Field.Error>35       </Field>36       <Field disabled>37         <Field.Label>Disabled</Field.Label>38         <Field.Control>39           <Textarea placeholder="Disabled textarea" />40         </Field.Control>41       </Field>42       <Field>43         <Field.Label>Read-only</Field.Label>44         <Field.Control>45           <Textarea readOnly defaultValue="Generated by the last review run." />46         </Field.Control>47       </Field>48     </div>49   );50 }51

Focus

Preview

tsx

1 import { Field } from "@/components/ui/field";2 import { Textarea } from "@/components/ui/textarea";3 4 // The focus classes are applied statically so the treatment stays visible in a5 // screenshot. In real usage `focus:` applies them for you.6 const FOCUS_RING = "border-ring ring-1 ring-ring";7 8 export default function TextareaFocus() {9   return (10     <div className="flex max-w-sm flex-col gap-4">11       <Field>12         <Field.Label>Resting</Field.Label>13         <Field.Control>14           <Textarea placeholder="Not focused" />15         </Field.Control>16       </Field>17       <Field>18         <Field.Label>Focused</Field.Label>19         <Field.Control>20           <Textarea className={FOCUS_RING} placeholder="Focused" />21         </Field.Control>22       </Field>23     </div>24   );25 }26

API Reference

Textarea

Name	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Padding, font-size, and min-height token. Resize behavior is configured independently.
resize	"none" \| "vertical" \| "horizontal" \| "both"	"vertical"	Axes/edges that expose a resize handle. Read-only and disabled textareas suppress every handle.
resizeHandle	TextareaResizeHandle \| { vertical?: TextareaResizeHandle; horizontal?: TextareaResizeHandle }	"line"	How each resize handle is drawn: "line" for a 30px mark held off the field border, "box" for an arrow-only chip centered on the border, or "box-label" for that chip with a RESIZE label. A single value styles both edges; an object styles each edge independently.
resizeLabels	{ vertical?: string; horizontal?: string }	"Resize textarea vertically" / "Resize textarea horizontally"	Accessible names for the resize handles, per axis.
aria-invalid	boolean \| "true" \| "false" \| "grammar" \| "spelling"	—	The native ARIA invalid state. The error border applies to true/"true"; the error ring joins on focus. Field.Control sets this automatically when Field.invalid is true.

Accessibility

Notes

Resize Direction

Set resize to "vertical", "horizontal", "both", or "none". The default vertical mode puts a handle on the bottom edge, horizontal puts one on the right edge, and both exposes each edge independently and leaves the corner between them empty. Every handle is a button: drag it, or focus it and press ArrowDown/ArrowUp (vertical) or ArrowRight/ArrowLeft (horizontal) to step by 8px, or press Enter or Space to grow by the same step. Each resizable edge reserves a 16px band outside the field, so the scrollbar stays inside the textarea and can reach the final line.

Resize Handle Style

Pass resizeHandle to choose how each handle is drawn. "line" is a 30px mark centered on the edge and held 10px clear of the field border, so it paints nothing over the field. "box" is a 20px chip carrying only the direction arrow, centered on the field border: the border runs unbroken behind it and half the chip overlaps the field at the edge midpoint. "box-label" is the same chip widened to carry a RESIZE label beside the arrow. Give one value to style both edges, or an object with vertical and horizontal keys to style them independently. The drawing is decorative; the handle button keeps its accessible label and keyboard behavior either way.

Read-only vs Disabled

Textarea styles the two states on different channels so they cannot be confused. Disabled keeps a faint surface, dashed edge, and muted ink: the field is not part of this form. Read-only uses a subtle recessed surface plus an inset start rail while preserving full-contrast ink: the value matters, it just cannot be edited. A read-only field stays focusable and copyable, and the focus ring still applies on top. Both states suppress every resize handle.

Invalid State

Set aria-invalid=true to apply the error border. The error ring joins on focus, so focus stays the strongest edge a field shows. Field.Control sets aria-invalid automatically when Field.invalid is true.

Source

Install via CLI: pnpm exec dgadd add ui/textarea.

Highlighted source loads after this disclosure opens. Browse the source repository.

Textarea

Installation

Usage

Examples

Resize directions

Variants

Focus

API Reference

Textarea

Accessibility

Notes

Resize Direction

Resize Handle Style

Read-only vs Disabled

Invalid State

Source

View component source (11 files)