<Textarea id="message" label="Message" placeholder="Write your message…" hint="Max 500 characters." />

<Textarea id="message" label="Message" error="Message is required." required />

<Textarea id="message" label="Message" placeholder="Not editable" disabled />

function Demo() {
  const MAX = 200;
  const [v, setV] = useState('');
  return (
    <div className="space-y-1">
      <Textarea id="bio" label="Bio" value={v} maxLength={MAX} rows={3}
        onChange={(e) => setV(e.target.value)} />
      <p className={`text-xs text-right ${MAX - v.length < 20 ? 'text-error' : 'text-text-secondary'}`}>
        {MAX - v.length} characters remaining
      </p>
    </div>
  );
}