The textarea component is used to capture multi-line text input from the user.
Example
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
message textdisabled messageerror messagesuccess 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
message textdisabled messageerror messagesuccess 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
message textdisabled messageerror messagesuccess 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
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 |
value | string | FormData | |
disabled | boolean | |
required | boolean | |
readonly | boolean | undefined | |
multiple | boolean | |
autocomplete | string | |
type | string | |
name | string | |
pattern | string | |
placeholder | string | |
minLength | number | |
maxLength | number | |
min | number | |
max | number | |
size | number | |
valueAsNumber |
| |
formAssociated | boolean | |
Attributes
Name | Types | Description |
value | string | FormData | |
disabled | boolean | |
required | boolean | |
readonly | boolean | undefined | |
multiple | boolean | |
autocomplete | string | |
type | string | |
name | string | |
pattern | string | |
placeholder | string | |
minLength | number | |
maxLength | number | |
min | number | |
max | number | |
size | number | |
CSS Properties
Name | Types | Description |
--background |
| |
--border |
| |
--padding |
| |
--font-size |
| |
--color |
| |
--border-radius |
| |
--min-height |
| |