Textarea

pnpm dlx @hex-core/cli add textarea

<div className="grid gap-1.5">
  <Label htmlFor="message">Message</Label>
  <Textarea id="message" placeholder="Type your message..." />
</div>

import { useState } from "react";

const MAX_LENGTH = 280;

export function BioField() {
  const [value, setValue] = useState("");
  const remaining = MAX_LENGTH - value.length;
  const counterId = "bio-counter";

  return (
    <div className="grid gap-1.5">
      <Label htmlFor="bio">Bio</Label>
      <Textarea
        id="bio"
        rows={4}
        maxLength={MAX_LENGTH}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Tell us a little about yourself"
        aria-describedby={counterId}
      />
      <p
        id={counterId}
        className={`text-xs tabular-nums ${remaining < 20 ? "text-destructive" : "text-muted-foreground"}`}
        aria-live="polite"
      >
        {value.length} / {MAX_LENGTH}
      </p>
    </div>
  );
}