Textarea
A multiline field built on React Aria - the same shell, label, hint and states as Input, plus auto-grow and character counting for notes, messages and settings pages.
Installation
You can add the textarea component using our CLI or manually:
Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.
The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.
npx boardui@latest add textareaSizes
medium and small match Input's insets, so the two components stack in a form without a seam. rows sets the resting height.
Auto resize
autoResize grows the field with its text, one line at a time, between rows and maxRows. Past the ceiling it scrolls. The height is measured from zero on every change, so the field shrinks back when text is deleted.
Character count
showCount puts the counter on the hint row. With maxLength it reads 12/160 and the browser enforces the limit; without one it just counts.
States
Hover and focus cross-fade the ring. isDisabled and isInvalid override both and repaint the field, hint and label. resize="none"removes the native grab handle when a fixed height matters more than the reader's comfort.