Textarea

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

Your message

tsx

1
2<Label htmlFor="msg">Message</Label>
<Textarea id="msg" placeholder="…" rows={4} />

Textarea — <textarea> HTML natif stylé shadcn. Pour du texte multiline (message, description, notes). Auto-resize non inclus — utiliser rows ou du CSS.

Installation

Terminal

$ bext ui add textarea

Usage

tsx

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

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

Anatomy

<Textarea name value placeholder rows disabled required />

API Reference

Textarea

Prop	Type	Default	Description
name	string	—	Nom pour form.
value / defaultValue	string	—	Contrôlé ou non.
placeholder	string	—	undefined
rows	number	3	Nombre de lignes visibles.
disabled	boolean	—	undefined
required	boolean	—	undefined

Keyboard

Key	Action
`Enter`	Newline (contrairement à Input qui submit).
`Ctrl+Enter`	Convention : envoyer / submit — à câbler côté form si voulu.

Accessibility

Toujours accompagner d'un <Label htmlFor="id">. Placeholder n'est pas un 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