Textarea

Multi-line inputs used by users to enter longer text portions.

Classes

Class	Description	Parent	Modifies
`.s-textarea`	Base textarea style.	N/A	N/A
`.s-textarea__sm`	Apply a small size.	N/A	`.s-textarea`
`.s-textarea__lg`	Apply a large size.	N/A	`.s-textarea`

Base style

<div class="d-flex fd-column gy4">
    <label class="s-label" for="example-item">Question body</label>
    <div class="d-flex ps-relative">
        <textarea class="s-textarea w100" id="example-item" placeholder="…"></textarea>
    </div>
</div>

Question body

Accessibility

It is recommended to follow the same accessibility guidance as the Input component. Including marking Textarea’s as required via the .s-required-symbol class.

Validation states

Validation states provides the user feedback based on their interaction (or lack of interaction) with a textarea. These styles are applied by applying the appropriate class to the wrapping parent container.

Validation classes

Class	Description	Applies to
`.has-warning`	Used to warn users that the value they've entered has a potential problem, but it doesn't block them from proceeding.	Parent element
`.has-error`	Used to alert users that the value they've entered is incorrect, not filled in, or has a problem which will block them from proceeding.	Parent element
`.has-success`	Used to notify users that the value they've entered is fine or has been submitted successfully.	Parent element

Validation examples

Warning

<div class="s-form-group has-warning">
    <label class="s-label" for="example-warning">Description</label>
    <div class="d-flex ps-relative">
        <textarea class="s-textarea w100" id="example-warning" placeholder="Please describe your problem"></textarea>
        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
    </div>
    <p class="s-input-message">Consider entering a description to help us better help you.</p>
</div>

Description

Consider entering a description to help us better help you.

Error

<div class="s-form-group has-error">
    <label class="s-label" for="example-error">Description</label>
    <div class="d-flex ps-relative">
        <textarea class="s-textarea w100" id="example-error" placeholder="Please describe your problem"></textarea>
        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
    </div>
    <p class="s-input-message">A description must be provided.</p>
</div>

Description

A description must be provided.

Success

<div class="s-form-group has-success">
    <label class="s-label" for="example-success">Description</label>
    <div class="d-flex ps-relative">
        <textarea class="s-textarea w100" id="example-success" placeholder="Please describe your problem">…</textarea>
        <svg class="svg-icon s-input-icon" aria-hidden="true">…</svg>
    </div>
    <p class="s-input-message">Thanks for providing a description.</p>
</div>

Description

Thanks for providing a description.

Sizes

Class	Name	Size
`.s-textarea__sm`	Small	13px
N/A	Default	14px
`.s-textarea__lg`	Large	18px