Textarea

Displays a form textarea or a component that looks like a textarea.

Your message

tsx

1
2
3
4<div className="w-full max-w-md grid gap-2">
  <Label htmlFor="msg">Your message</Label>
  <Textarea id="msg" placeholder="Type your message here..." rows={4} />
</div>

Textarea is a native HTML <textarea> with shadcn styling, for multiline text (message, description, notes). Auto-resize is not included: use rows or CSS.

Installation

Terminal

$ bext ui add textarea

Copy and paste the following into src/components/ui/textarea.tsx.

textarea.tsx

1
2
3
4<div className="w-full max-w-md grid gap-2">
  <Label htmlFor="msg">Your message</Label>
  <Textarea id="msg" placeholder="Type your message here..." rows={4} />
</div>

Usage

tsx

1
2
3
4
5
6import { Textarea, Label } from "@bext-stack/ui/primitives"

<div className="grid gap-2">
  <Label htmlFor="msg">Your message</Label>
  <Textarea id="msg" placeholder="Type your message here..." rows={4} />
</div>

Anatomy

<Textarea id name placeholder rows disabled required />

API Reference

Textarea

Prop	Type	Default	Description
placeholder	string	—	Hint shown while the field is empty.
id	string	—	id of the <textarea>, for a <Label htmlFor>.
name	string	—	Form field name. Forwarded to the <textarea> like any other attribute.
rows	number	—	Number of visible rows. Not set by default: the height comes from min-h-[60px].
disabled	boolean	—	Disables the field (not-allowed cursor, 50% opacity).
required	boolean	—	Native required attribute.
className	string	—	Extra classes on the <textarea>.
…rest	attributes	—	Any other prop (aria-, data-, maxlength…) is forwarded to the <textarea>. There is no prop for initial text: the element is rendered empty.

Keyboard

Key	Action
`Enter`	Newline (unlike Input, which submits).

Accessibility

Always pair it with a <Label htmlFor="id">. A placeholder is not a label.

Try it live Open in play

Edit this example live in the bext playground. It compiles and runs entirely in your browser.

src/app/page.tsx 1 file · react · runs in your browser

// A multi-line text field. Same neutral styling as <Input>, with
// vertical resizing and a generous default height.
const area = {
  width: "100%", minHeight: 96, padding: "10px 12px", borderRadius: 8, fontSize: 14,
  border: "1px solid #e2e8f0", background: "#fff", color: "#0a0a0a",
  fontFamily: "inherit", lineHeight: 1.5, resize: "vertical", boxSizing: "border-box",
};

export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Textarea</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A resizable multi-line text field.</p>
      <div style={{ marginTop: 22, maxWidth: 360 }}>
        <label htmlFor="msg" style={{ display: "block", fontSize: 14, fontWeight: 600, marginBottom: 6 }}>Your message</label>
        <textarea id="msg" style={area} placeholder="Type your message here." />

The React idiom: same UI, for comparison.

← Tabs Toast →

On This Page