Textarea

The multi-line sibling of TextInput — the same variants, floating label, hint, error and validation.

Filled

Outlined

Underlined

With value

---
import { Textarea } from 'bws-astro-ui';
---

<Textarea name="message" label="Message" />
<Textarea name="message" label="Message" variant="outlined" rows={3} />

The label rests on the first line while the field is empty and floats up on focus or once there’s text.

Auto-grow

With autoGrow the field grows with its content instead of scrolling; rows is then the minimum height and maxRows the maximum, after which it scrolls. The resize handle is hidden.

Auto-grow

Auto-grow, max 4 rows

<Textarea label="Message" rows={2} autoGrow maxRows={6} />

Counter

counter shows the number of characters — out of maxlength when it’s set, or out of the number you pass. The count turns red above the limit; use a maxLength rule to also block the submit.

Bio

Shown on your profile

0 / 160

Note

0 / 50

<Textarea label="Bio" maxlength={160} counter hint="Shown on your profile" />
<Textarea label="Note" counter={50} rules={[maxLength(50)]} />

States

Message

Write at least 10 characters

Disabled

No resize

With placeholder

API

Prop	Type	Default
`label`	`string`	—
`variant`	`filled` · `outlined` · `underlined`	`filled`
`color`	focus color	`primary`
`value`	`string` — initial text	—
`rows`	`number` — visible lines; the minimum with `autoGrow`	`5`
`autoGrow`	`boolean`	`false`
`maxRows`	`number` — with `autoGrow`, lines before it scrolls	—
`counter`	`boolean` or `number` — character counter	—
`noResize`	`boolean` — hide the resize handle	`false`
`hint`	`string`	—
`error`	`string` — starts out invalid	—
`rules`	validation rules	—
`id`, `class`	`string` — `class` goes to the wrapper	—

Any other attribute (name, placeholder, maxlength, required, disabled…) goes to the <textarea>.

Created by