Textarea

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

Project notes

Capture context the team needs later.

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

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

Props

Prop	Attribute	Values	Default
`presentation`	`data-dn-presentation`	`input`	`input`
`label`	None	React node	None
`hint`	None	React node	None
`fieldOrientation`	None	`vertical`, `horizontal`	`vertical`
`emphasis`	`data-dn-emphasis`	`primary`, `secondary`, `outline`, `ghost`	`primary`
`size`	`data-dn-size`	`2xs`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`	`md`

Label and hint

Notes

Visible to collaborators.

import { Textarea } from "density-base-ui";
export default function TextareaFieldExample() {
  return <Textarea label="Notes" hint="Visible to collaborators." />;
}

Field orientation

Vertical

Horizontal

import { Textarea } from "density-base-ui";
export default function TextareaFieldOrientationExample() {
  return (
    <div style={{ display: "grid", gap: "1rem", width: "100%" }}>
      <Textarea fieldOrientation="vertical" label="Vertical" />
      <Textarea fieldOrientation="horizontal" label="Horizontal" />
    </div>
  );
}

Emphasis

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

export default function TextareaEmphasisExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem", width: "100%" }}>
      <Textarea emphasis="primary" placeholder="Primary textarea" rows={2} />
      <Textarea
        emphasis="secondary"
        placeholder="Secondary textarea"
        rows={2}
      />
      <Textarea emphasis="outline" placeholder="Outline textarea" rows={2} />
      <Textarea 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 size="2xs" placeholder="2xs textarea" rows={2} />
      <Textarea size="xs" placeholder="xs textarea" rows={2} />
      <Textarea size="sm" placeholder="sm textarea" rows={2} />
      <Textarea size="md" placeholder="md textarea" rows={2} />
      <Textarea size="lg" placeholder="lg textarea" rows={2} />
      <Textarea size="xl" placeholder="xl textarea" rows={2} />
      <Textarea size="2xl" placeholder="2xl textarea" rows={2} />
      <Textarea size="3xl" placeholder="3xl textarea" rows={2} />
    </div>
  );
}