Text area

Text areas allow users to enter multiple lines of text for things like comments and notes.

<bolt-textarea label="Default text area"></bolt-textarea>

<bolt-textarea label="Default text area" showcount></bolt-textarea>

<bolt-textarea label="Text area with error" error="Error message goes here" showcount></bolt-textarea>

<bolt-textarea label="Field name" required invalid></bolt-textarea>

<bolt-textarea label="Disabled text area" disabled></bolt-textarea>

<bolt-textarea label="Non-required text area" optionaltext="hide"></bolt-textarea>

<bolt-textarea label="Textarea" cols="40" rows="3"></bolt-textarea>

<bolt-textarea label="Default text area">
    <bolt-contextual-help slot="help" heading="Help text heading">
        <p>Help text body content</p>
    </bolt-contextual-help>
</bolt-textarea>

The <bolt-textarea> custom element creates a text area with a label and optional error text and character count:

<bolt-textarea label="Comments" showcount></bolt-textarea>

The <bolt-textarea> element should not be used to display a read-only scrollable field of text such as a legal agreement.

The <bolt-textarea> element must include one of these three parameters:

• label: The label text for the input.
• arialabel: optional. Sets the aria-label attribute of the underlying <textarea> element.
• arialabelledby: optional. Sets the aria-labelledby attribute of the underlying <textarea> element.

Additionally, the <bolt-textarea> element supports the following parameters:

• value: The value for the input.
• required: optional. If present, the field is required. Fields that are not required will show "(optional)".
• optionaltext: optional. show (default) or hide. Use to remove the "(optional)" text from non-required fields.
• rows: optional, defaults to 4. The number of rows on the textarea.
• cols: optional. Specifies the width of the textarea in terms of average character widths. If not present, it will span the full width of its container.
• disabled: optional. If present, disables rendered interactive elements.
• error: The error message to display after the input.
  • Should not be used when component is disabled.
  • For slotted field error see textarea error slot
• showcount: optional. If present, the remaining character count (based on maxlength) will be displayed.
• maxlength: optional, defaults to 250. The maximum number of characters allowed in the text area.
• invalid: optional. If present, the field appears invalid.
• datatesttextarea optional property to configure the data-test value on the underlying <textarea> element. Default is textarea.

The <bolt-textarea> element supports the use of <bolt-contextual-help> via the help slot placeholder. For more information and to see other options visit the contextual help page.

The following attributes are passed through to the native <textarea> element. Please see the MDN Textarea element documentation for details.

• spellcheck: optional. Defaults to false.
• autocomplete: optional. Defaults to off. Please see possible values.
• autocorrect: optional. Defaults to on.
• autocapitalize: optional. Defaults to on.
• inputmode: optional, see standard behavior

• [data-test="textarea"] - targets primary <textarea> element
  • Configurable via the datatesttextarea property

• A character counter should be displayed if the number of characters users may enter is restricted.
• If a screen includes a Text area, using the Enter key on a keyboard (physical or virtual) should not trigger the same action as a Primary Button, such as a submit Button. Allow users to use the Enter key to add a line break while typing inside a Text area.
• Text area inputs can be configured to resize manually or have a fixed height or width.

• The dimensions of a Text area should allow for minimal vertical scrolling inside the Text area, given the allowed number of characters users can enter.

• The dimensions of a Text area should not require vertical scrolling of the screen if a virtual keyboard is displayed.

• A Text area is ideal for use when a user needs to enter more characters than would fit inside a traditional Text field.

• Avoid using the Text area element when the expected input can fit within a single line; use a Text field instead.

• Text area labels should use sentence case.

All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.