Textarea
Multi-line inputs used by users to enter longer text portions.
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"
id="example-item"
placeholder="…"
></textarea>
</div>
</div>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 | 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="d-flex gy4 fd-column has-warning">
<label class="s-label" for="example-warning">Description</label>
<div class="d-flex ps-relative">
<textarea
class="s-textarea"
id="example-warning"
placeholder="Please describe your problem"
></textarea>
<svg class="s-input-icon" ...>...</svg>
</div>
<p class="s-input-message mb0">
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="d-flex gy4 fd-column has-error">
<label class="s-label" for="example-success">Description</label>
<div class="d-flex ps-relative">
<textarea
class="s-textarea"
id="example-success"
placeholder="Please describe your problem"
></textarea>
<svg class="s-input-icon" ...>...</svg>
</div>
<p class="s-input-message mb0">A description must be provided.</p>
</div>A description must be provided.
Success
<div class="d-flex gy4 fd-column has-success">
<label class="s-label" for="example-success">Description</label>
<div class="d-flex ps-relative">
<textarea
class="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 class="s-input-icon" ...>...</svg>
</div>
<p class="s-input-message mb0">Thanks for providing a description.</p>
</div>Thanks for providing a description.
Sizes
| Name | Size | Class | Example |
|---|---|---|---|
| Small | 13px | .s-textarea__sm | |
| Default | 14px | N/A | |
| Large | 18px | .s-textarea__lg |