Textarea

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

export default function TextareaExample() {
  const [context, setContext] = useState("");

  return (
    <Textarea
      value={context}
      onChange={(event) => {
        setContext(event.target.value);
      }}
      placeholder="Add the important context here."
      rows={4}
    />
  );
}

import { useState } from "react";
import { Textarea } from "density-base-ui";
export default function TextareaFieldExample() {
  const [notes, setNotes] = useState("");

  return (
    <Textarea
      value={notes}
      onChange={(event) => {
        setNotes(event.target.value);
      }}
      label="Notes"
      hint="Visible to collaborators"
    />
  );
}

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

export default function TextareaErrorExample() {
  const [releaseNotes, setReleaseNotes] = useState("");

  return (
    <Textarea
      value={releaseNotes}
      onChange={(event) => {
        setReleaseNotes(event.target.value);
      }}
      errorMessage="Describe the release notes before continuing"
      hint="Visible to collaborators"
      label="Release notes"
    />
  );
}

import { useState } from "react";
import { Separator, Textarea, View } from "density-base-ui";

export default function TextareaFieldOrientationExample() {
  const [verticalValue, setVerticalValue] = useState("");
  const [horizontalValue, setHorizontalValue] = useState("");

  return (
    <View gap="lg">
      <Textarea
        value={verticalValue}
        onChange={(event) => {
          setVerticalValue(event.target.value);
        }}
        fieldOrientation="vertical"
        label="Vertical"
      />
      <Separator />
      <Textarea
        value={horizontalValue}
        onChange={(event) => {
          setHorizontalValue(event.target.value);
        }}
        fieldOrientation="horizontal"
        label="Horizontal"
      />
    </View>
  );
}

import { useState } from "react";
import { Textarea, View } from "density-base-ui";

export default function TextareaEmphasisExample() {
  const [textareaValues, setTextareaValues] = useState<Record<string, string>>(
    {},
  );
  const updateTextareaValue = (emphasis: string, value: string) => {
    setTextareaValues((currentValues) => ({
      ...currentValues,
      [emphasis]: value,
    }));
  };

  return (
    <View>
      <Textarea
        value={textareaValues.primary ?? ""}
        onChange={(event) => updateTextareaValue("primary", event.target.value)}
        emphasis="primary"
        placeholder="Primary textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.secondary ?? ""}
        onChange={(event) =>
          updateTextareaValue("secondary", event.target.value)
        }
        emphasis="secondary"
        placeholder="Secondary textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.outline ?? ""}
        onChange={(event) => updateTextareaValue("outline", event.target.value)}
        emphasis="outline"
        placeholder="Outline textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.ghostPrimary ?? ""}
        onChange={(event) =>
          updateTextareaValue("ghostPrimary", event.target.value)
        }
        emphasis="ghost-primary"
        placeholder="Ghost primary textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.ghostSecondary ?? ""}
        onChange={(event) =>
          updateTextareaValue("ghostSecondary", event.target.value)
        }
        emphasis="ghost-secondary"
        placeholder="Ghost secondary textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.ghostTertiary ?? ""}
        onChange={(event) =>
          updateTextareaValue("ghostTertiary", event.target.value)
        }
        emphasis="ghost-tertiary"
        placeholder="Ghost tertiary textarea"
        rows={2}
      />
    </View>
  );
}

import { useState } from "react";
import { Textarea, View } from "density-base-ui";

export default function TextareaSizeExample() {
  const [textareaValues, setTextareaValues] = useState<Record<string, string>>(
    {},
  );
  const updateTextareaValue = (size: string, value: string) => {
    setTextareaValues((currentValues) => ({ ...currentValues, [size]: value }));
  };

  return (
    <View>
      <Textarea
        value={textareaValues["2xs"] ?? ""}
        onChange={(event) => updateTextareaValue("2xs", event.target.value)}
        size="2xs"
        placeholder="2xs textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.xs ?? ""}
        onChange={(event) => updateTextareaValue("xs", event.target.value)}
        size="xs"
        placeholder="xs textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.sm ?? ""}
        onChange={(event) => updateTextareaValue("sm", event.target.value)}
        size="sm"
        placeholder="sm textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.md ?? ""}
        onChange={(event) => updateTextareaValue("md", event.target.value)}
        size="md"
        placeholder="md textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.lg ?? ""}
        onChange={(event) => updateTextareaValue("lg", event.target.value)}
        size="lg"
        placeholder="lg textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues.xl ?? ""}
        onChange={(event) => updateTextareaValue("xl", event.target.value)}
        size="xl"
        placeholder="xl textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues["2xl"] ?? ""}
        onChange={(event) => updateTextareaValue("2xl", event.target.value)}
        size="2xl"
        placeholder="2xl textarea"
        rows={2}
      />
      <Textarea
        value={textareaValues["3xl"] ?? ""}
        onChange={(event) => updateTextareaValue("3xl", event.target.value)}
        size="3xl"
        placeholder="3xl textarea"
        rows={2}
      />
    </View>
  );
}