Form

Textarea

Multi-line text field. Shares Input's visual language — same fill, border, and radius, with a taller minimum height and a vertical resize handle.

Preview

Code

src/components/ui/Textarea.tsx

import type { TextareaHTMLAttributes } from "react";

/**
 * Textarea — `textarea` token from hyliox-waitlist-card.md. Shares the
 * `input` visual language (fill, border, radius); only the min-height and
 * resize handle differ.
 */
export function Textarea({
  className = "",
  ...props
}: TextareaHTMLAttributes<HTMLTextAreaElement> & { className?: string }) {
  return (
    <textarea
      {...props}
      className={`min-h-26 w-full resize-y rounded-md border border-border-subtle bg-(--glass-input-bg) px-4 py-3.5 text-base text-on-surface placeholder:text-secondary transition-colors focus:border-primary focus:outline-none md:text-sm ${className}`}
    />
  );
}

Installation

Usage

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

<Textarea placeholder="Describe what you're trying to build…" />

Props

Prop	Type	Default	Description
className	string	""	Extra classes merged onto the textarea.
...props	TextareaHTMLAttributes<HTMLTextAreaElement>	—	Any native textarea prop (value, onChange, rows, etc.).

Accessibility

Same labeling note as Input — pair with a visible label in real usage.