Textarea

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

Usage

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

export default function Example() {
  return <Textarea label="Feedback" hint="What would make this better?" maxLength={280} showCount rows={3} />;
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

<html data-theme="graphite" data-mode="light">

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

<div class="ml-input-field">
  <label class="ml-input-label" id="textarea-1-label" for="textarea-1">Feedback</label>
  <textarea class="ml-textarea" id="textarea-1" rows="3" maxLength="280" aria-describedby="textarea-1-hint" style="--ml-textarea-max-rows:12"></textarea>
  <p class="ml-textarea-count" aria-live="polite">0 / 280</p>
  <p class="ml-input-hint" id="textarea-1-hint">What would make this better?</p>
</div>

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Accessibility and theming

• Semantic elements, accessible names and state relationships are part of the contract.
• Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
• Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
• Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

• input