Textarea

npm2.0.0

The textarea component is used to capture multi-line text input from the user.

Example

Allows users to enter multi-line text content.

textarea

message text

code

<script type="module">
  import '@blueprintui/components/include/textarea.js';
</script>

<bp-field>
  <label>textarea</label>
  <bp-textarea min="2"></bp-textarea>
  <bp-field-message>message text</bp-field-message>
</bp-field>

Vertical

Demonstrates the textarea in vertical form layout.

label

message text

disabled

disabled message

error status

error message

success status

success message

code

<bp-form-group layout="vertical">
  <bp-field layout="vertical">
    <label>label</label>
    <bp-textarea></bp-textarea>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="vertical">
    <label>disabled</label>
    <bp-textarea disabled></bp-textarea>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical" status="error">
    <label>error status</label>
    <bp-textarea></bp-textarea>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="vertical" status="success">
    <label>success status</label>
    <bp-textarea></bp-textarea>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Horizontal

Demonstrates the textarea in horizontal form layout.

label

message text

disabled

disabled message

error status

error message

success status

success message

code

<bp-form-group layout="horizontal">
  <bp-field layout="horizontal">
    <label>label</label>
    <bp-textarea></bp-textarea>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal">
    <label>disabled</label>
    <bp-textarea disabled></bp-textarea>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="error">
    <label>error status</label>
    <bp-textarea></bp-textarea>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="horizontal" status="success">
    <label>success status</label>
    <bp-textarea></bp-textarea>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Compact

Demonstrates the textarea in compact form layout.

label

message text

disabled

disabled message

error status

error message

success status

success message

code

<bp-form-group layout="compact">
  <bp-field layout="compact">
    <label style="max-width: 180px">label</label>
    <bp-textarea></bp-textarea>
    <bp-field-message>message text</bp-field-message>
  </bp-field>

  <bp-field layout="compact">
    <label>disabled</label>
    <bp-textarea disabled></bp-textarea>
    <bp-field-message>disabled message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="error">
    <label>error status</label>
    <bp-textarea></bp-textarea>
    <bp-field-message status="error">error message</bp-field-message>
  </bp-field>

  <bp-field layout="compact" status="success">
    <label>success status</label>
    <bp-textarea></bp-textarea>
    <bp-field-message status="success">success message</bp-field-message>
  </bp-field>
</bp-form-group>

Install

NPM

// npm package
import '@blueprintui/components/include/textarea.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/textarea.js/+esm';
</script>

Accessibility

Use the label element or aria-label attribute to provide a label for the textarea.
Provide a clear and descriptive placeholder attribute to give users an idea of what type of text is expected.

bp-textarea

Events

Name	Types	Description
`input`	`InputEvent`	occurs when the value changes
`change`	`InputEvent`	occurs when the value changes

Properties

Name	Types	Description

CSS Properties

Name	Types	Description
`--background`
`--border`
`--padding`
`--font-size`
`--color`
`--border-radius`
`--min-height`