Textarea

TS

import { … } from "@fungi.computer/caps/components/textarea";

Hero

TSX

import { Textarea } from "@fungi.computer/caps/components/textarea";

export default function Hero() {
  return (
    <Textarea
      className="w-full max-w-sm"
      defaultValue="Found three chanterelles near the creek bend, hiding under oak leaves."
      rows={3}
    />
  );
}

States

TSX

import { Textarea } from "@fungi.computer/caps/components/textarea";

export default function States() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Textarea defaultValue="Too vague" invalid rows={2} />
      <Textarea defaultValue="Locked note" disabled rows={2} />
    </div>
  );
}

Interactive

TSX

import { useState } from "react";
import { Textarea } from "@fungi.computer/caps/components/textarea";

export default function Interactive() {
  const [note, setNote] = useState("");
  const limit = 140;
  return (
    <div className="flex w-full max-w-sm flex-col gap-1">
      <Textarea
        maxLength={limit}
        onChange={(event) => {
          setNote(event.target.value);
        }}
        placeholder="Add a field note…"
        rows={3}
        value={note}
      />
      <p className="text-xs text-base-content">
        {note.length}/{limit}
      </p>
    </div>
  );
}

Props

TextareaProps

Prop	Type	Description
invalid?	boolean

• invalid?boolean

Full types: API reference.