Textarea

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Team bio

Read-only state

AICU handles the scheduling automatically.

Available props

Toggle to update the preview

Disabled

disabled: true

Read only

readOnly: true

Invalid

aria-invalid: true

Prop reference

Auto-generated from the component source

Textarea

className

Code

// owner: Sona
"use client";

import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaExample() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="bio">Team bio</Label>
        <Textarea
          id="bio"
          placeholder="Tell us a little about the initiative."
          rows={4}
        />
      </div>
      <div className="space-y-2">
        <Label htmlFor="notes">Read-only state</Label>
        <Textarea
          id="notes"
          value="AICU handles the scheduling automatically."
          readOnly
        />
      </div>
    </div>
  );
}

Textarea

Component preview

On this page

Command Palette