Textarea

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

export function Basic() {
  return <Textarea aria-label="Message" placeholder="Write a message…" className="w-64" />;
}

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

const sizes = ["sm", "md", "lg"] as const;

export function Sizes() {
  return (
    <div className="flex w-64 flex-col gap-3">
      {sizes.map((size) => (
        <Textarea
          key={size}
          aria-label={`Size ${size}`}
          size={size}
          rows={2}
          placeholder={`Size ${size}`}
        />
      ))}
    </div>
  );
}

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

export function Disabled() {
  return <Textarea aria-label="Message" disabled defaultValue="Can’t edit this" className="w-64" />;
}

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

export function Invalid() {
  return <Textarea aria-label="Bio" data-invalid defaultValue="Too short" className="w-64" />;
}