Textarea
A <nana-textarea> element.
Preview
Section titled “Preview”<nana-textarea label="Message" placeholder="Write something…" rows="3" style="min-width:18rem"></nana-textarea>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/textarea";Basic usage
Section titled “Basic usage”<nana-textarea label="Message" placeholder="Write something…" rows="3" style="min-width:18rem"></nana-textarea>States
Section titled “States”<nana-textarea label="Disabled" placeholder="Cannot edit" disabled style="min-width:20rem"></nana-textarea>
<nana-textarea label="Readonly" value="Read-only content" readonly style="min-width:20rem"></nana-textarea>
<nana-textarea label="Invalid" value="bad value" invalid error-message="Please fix this field" style="min-width:20rem"></nana-textarea>| Property | Type | Default | Description |
|---|---|---|---|
label | string | '' | — |
value | string | '' | — |
name | string | '' | — |
placeholder | string | '' | — |
disabled | boolean | false | — |
required | boolean | false | — |
readonly | boolean | false | — |
invalid | boolean | false | — |
success | boolean | false | — |
autoGrow | boolean | false | — |
helperText | string | '' | — |
errorMessage | string | '' | — |
rows | number | 4 | — |
maxlength | number | undefined | — | — |
minlength | number | undefined | — | — |
maxHeight | number | undefined | — | — |
autocomplete | HTMLTextAreaElement['autocomplete'] | 'off' | — |
spellcheck | boolean | false | — |
showWordCount | boolean | false | — |
wrap | HTMLTextAreaElement['wrap'] | undefined | — | — |
inputId | — | nana-textarea-${Math.random().toString(36).slice(2, 7)} | — |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
textarea | The native <textarea> element |
counter | The character counter span |
Accessibility
Section titled “Accessibility”- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Textarea interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook