Product Email Content Brand
Product Email Content Brand

Textarea

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

Base style

<div class="grid ff-column-nowrap gs4 gsy">
    <label class="grid--cell s-label" for="example-item">Question body</label>
    <textarea class="grid--cell s-textarea" id="example-item" placeholder="…"></textarea>
</div>

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 Applies Definition
.has-warning Parent wrapper for textarea Used to warn users that the value they’ve entered has a potential problem, but it doesn’t block them from proceeding.
.has-error Parent wrapper for textarea 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.
.has-success Parent wrapper for textarea Used to notify users that the value they’ve entered is fine or has been submitted successfully.

Validation examples

Warning

<div class="grid gs4 gsy fd-column has-warning">
    <label class="grid--cell s-label" for="example-warning">Description</label>
    <div class="grid ps-relative">
        <textarea class="grid--cell s-textarea" id="example-warning" placeholder="Please describe your problem"></textarea>
        @Svg.Alert.With("s-input-icon")
    </div>
    <p class="grid--cell s-input-message">Consider entering a description to help us better help you.</p>
</div>

Consider entering a description to help us better help you.

Error

<div class="grid gs4 gsy fd-column has-error">
    <label class="grid--cell s-label" for="example-success">Description</label>
    <div class="grid ps-relative">
        <textarea class="grid--cell s-textarea" id="example-success" placeholder="Please describe your problem"></textarea>
        @Svg.AlertCircle.With("s-input-icon")
    </div>
    <p class="grid--cell s-input-message">A description must be provided.</p>
</div>

A description must be provided.

Success

<div class="grid gs4 gsy fd-column has-success">
    <label class="grid--cell s-label" for="example-success">Description</label>
    <div class="grid ps-relative">
        <textarea class="grid--cell s-textarea" id="example-success" placeholder="Please describe your problem">How do you know your company is ready for a design system? How do you implement one without too many pain points? How do you efficiently maintain one once it’s built?</textarea>
        @Svg.Checkmark.With("s-input-icon")
    </div>
    <p class="grid--cell s-input-message">Thanks for providing a description.</p>
</div>

Thanks for providing a description.

Sizes

Name Size Class Example
Small 12px .s-textarea__sm
Default 13px N/A
Medium 17px .s-textarea__md
Large 21px .s-textarea__lg
Extra Large 27px .s-textarea__xl