Getting StartedInstallationSupportChangelogGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton Icon GroupButton SortCardCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleRadioRangeSearchSelectShellSwitchTabsTagTextareaTimeToastTooltipData GridGetting StartedFooterPlaceholderAsyncResponsiveScroll HeightPaginationBordersHoverColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

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

// 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

NameTypesDescription
inputInputEventoccurs when the value changes
changeInputEventoccurs when the value changes

Properties

NameTypesDescription
valuestring | FormData
disabledboolean
requiredboolean
readonlyboolean | undefined
multipleboolean
autocompletestring
typestring
namestring
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber
valueAsNumber
formAssociatedboolean

Attributes

NameTypesDescription
valuestring | FormData
disabledboolean
requiredboolean
readonlyboolean | undefined
multipleboolean
autocompletestring
typestring
namestring
patternstring
placeholderstring
minLengthnumber
maxLengthnumber
minnumber
maxnumber
sizenumber

CSS Properties

NameTypesDescription
--background
--border
--padding
--font-size
--color
--border-radius
--min-height