Components

Textarea

A multi-line text field that grows with its rows.

Usage

Basic

HTML

<bs:bsui-textarea rows="4" placeholder="Release notes" />

Labelled

Label above, help text below, the same anatomy as any other field.

Release notes Markdown is supported.

HTML

<bs:bsui-field>
  <bs:bsui-field-label text="Release notes" />
  <bs:bsui-textarea name="notes" rows="5" placeholder="What changed in this release?" />
  <bs:bsui-field-description text="Markdown is supported." />
</bs:bsui-field>

Invalid state

The error colour reaches the textarea border the same way it reaches an input.

Why are you leaving? Let us know before you cancel.

HTML

<bs:bsui-field invalid="true">
  <bs:bsui-field-label text="Why are you leaving?" />
  <bs:bsui-textarea rows="4" placeholder="Tell us what went wrong." />
  <bs:bsui-field-error text="Let us know before you cancel." />
</bs:bsui-field>

Disabled

The control keeps its placeholder but stops accepting focus and edits.

HTML

<bs:bsui-textarea rows="3" disabled="true" placeholder="Notes are locked while the release is publishing." />

Attributes

Attribute	Type	Default
`placeholder`	`text`	—
`rows`	`number`	`4`
`name`	`text`	—
`disabled`	`toggle`	`false`
`onChange`	`text`	—
`value`	`text`	—