Textarea

The textarea wraps a native textarea with Density’s shared control attributes.

import { Textarea } from "density-base-ui";

export default function TextareaExample() {
  return (
    <label>
      Project notes
      <Textarea placeholder="Add the important context here." rows={4} />
    </label>
  );
}

Props

Emphasis

import { Textarea } from "density-base-ui";

export default function TextareaEmphasisExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem", width: "100%" }}>
      <Textarea
        density-emphasis="primary"
        placeholder="Primary textarea"
        rows={2}
      />
      <Textarea
        density-emphasis="secondary"
        placeholder="Secondary textarea"
        rows={2}
      />
      <Textarea
        density-emphasis="outline"
        placeholder="Outline textarea"
        rows={2}
      />
      <Textarea
        density-emphasis="ghost"
        placeholder="Ghost textarea"
        rows={2}
      />
    </div>
  );
}

Size

import { Textarea } from "density-base-ui";

export default function TextareaSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem", width: "100%" }}>
      <Textarea density-size="2xs" placeholder="2xs textarea" rows={2} />
      <Textarea density-size="xs" placeholder="xs textarea" rows={2} />
      <Textarea density-size="sm" placeholder="sm textarea" rows={2} />
      <Textarea density-size="md" placeholder="md textarea" rows={2} />
      <Textarea density-size="lg" placeholder="lg textarea" rows={2} />
      <Textarea density-size="xl" placeholder="xl textarea" rows={2} />
      <Textarea density-size="2xl" placeholder="2xl textarea" rows={2} />
      <Textarea density-size="3xl" placeholder="3xl textarea" rows={2} />
    </div>
  );
}