Skip to main content

Accessible Design System v1

Type to filter components by name, description, or keywords

Textarea

Accessible textarea fields for multi-line text input with proper labeling and optional character count support.

Enter your message (maximum 500 characters)

HTML

<label for="message" class="ads-label">Message</label>
<div id="message-helper" class="ads-helper-text">
    Enter your message (maximum 500 characters)
</div>
<textarea 
    id="message" 
    class="ads-textarea"
    aria-describedby="message-helper"
    rows="5"
></textarea>

CSS

.ads-textarea {
    width: 100%;
    padding: 0.75rem;
    font-size: 16px;
    border: 2px solid var(--ads-border-color);
    border-radius: 4px;
    font-family: var(--ads-font-family);
    resize: vertical;
}

.ads-textarea:focus {
    outline: 3px solid var(--ads-focus-outline);
    outline-offset: 2px;
    border-color: var(--ads-primary-color);
}