Skip to content

Textarea

View .md Download

A <nana-textarea> element.

Preview

<nana-textarea label="Message" placeholder="Write something…" rows="3" style="min-width:18rem"></nana-textarea>

Installation

npm install @nana-tec/ui-components

Import

import "@nana-tec/ui-components/textarea";

Basic usage

<nana-textarea label="Message" placeholder="Write something…" rows="3" style="min-width:18rem"></nana-textarea>

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>

API

Properties

Property	Attribute	Type	Default	Description
`autocomplete`	—	`HTMLTextAreaElement['autocomplete']`	`'off'`
`autoGrow`	`auto-grow`	`boolean`	`false`
`disabled`	—	`boolean`	`false`
`errorMessage`	`error-message`	`string`	`''`
`helperText`	`helper-text`	`string`	`''`
`inputId`	—	`—`	`nana-textarea-${Math.random().toString(36).slice(2, 7)}`
`invalid`	—	`boolean`	`false`
`label`	—	`string`	`''`
`maxHeight`	`max-height`	`number \| undefined`	`—`
`maxlength`	—	`number \| undefined`	`—`
`minlength`	—	`number \| undefined`	`—`
`name`	—	`string`	`''`
`placeholder`	—	`string`	`''`
`readonly`	—	`boolean`	`false`
`required`	—	`boolean`	`false`
`rows`	—	`number`	`4`
`showWordCount`	`show-word-count`	`boolean`	`false`
`spellcheck`	—	`boolean`	`false`
`success`	—	`boolean`	`false`
`value`	—	`string`	`''`
`wrap`	—	`HTMLTextAreaElement['wrap'] \| undefined`	`—`

CSS Parts

Part	Description
`textarea`	The native `<textarea>` element
`counter`	The character counter span

Accessibility

Storybook

Explore Textarea interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook