Textarea
A multi-line text input with focus and validation states.
Default
Custom Rows
Disabled
Sizes
Invalid
Password managers
By default, Textarea opts out of password-manager autofill (1Password,
Bitwarden, LastPass) so contact, message, and notes forms don't render autofill
icon overlays. Browsers ignore autocomplete="off" on individual fields, so
Visor emits the four per-manager data-* attributes (data-1p-ignore,
data-bwignore, data-lpignore, data-form-type="other") that each manager
respects.
On the rare textarea where you want the manager to offer autofill, opt back in
with passwordManagers="allow":
<Textarea passwordManagers="allow" />Inheriting from Form
When wrapped in a <Form passwordManagers="allow">, Textarea inherits the
form-level value automatically, so credential-bearing notes fields don't need
the prop set individually. The field-level prop always wins, so a single
"private notes" textarea inside an otherwise-allow form can still opt out with
passwordManagers="ignore".
With Field
Installation
npx visor add textareaThis copies two files into your project:
components/ui/textarea/textarea.tsx— the componentcomponents/ui/textarea/textarea.module.css— the styles
Usage
import { Textarea } from '@/components/ui/textarea/textarea';
<Textarea placeholder="Type your message here." />API Reference
TextareaProps
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Placeholder text shown when the textarea is empty. |
rows | number | — | Number of visible text rows. |
disabled | boolean | false | Disables the textarea. |
passwordManagers | 'ignore' | 'allow' | 'ignore' | Whether 1Password / Bitwarden / LastPass should offer to autofill this field. Defaults to "ignore"; set to "allow" on credential fields, or set once at the parent <Form passwordManagers="allow">. Field-level prop wins over Form context. |
className | string | — | Additional CSS class names to merge onto the element. |
...props | React.TextareaHTMLAttributes<HTMLTextAreaElement> | — | All standard HTML textarea attributes are forwarded. |
The component also accepts all standard <textarea> HTML attributes.
Accessibility
- Renders a native
<textarea>element — always pair with a<Label>using matchinghtmlFor/id - Use
aria-invalid="true"to signal a validation error; pair with a<FieldError>oraria-describedbypointing to the error message - Use the
Fieldcomponent to automatically compose label, description, and error for a fully accessible form field - Consider adding a character count display with
aria-live="polite"when usingmaxLength