Textareas

Multi-line inputs are used to enter longer text portions.

Base Style

Textareas are normally paired with a label, but there are times when they can be used without a label. Placeholder text should primarily be used as a content prompt and only provided when needed.

Provide an email address or phone number.
Provide an email address or phone number.
<label class="d-label" for="Dialtone--TextareaExample1"></label>
<textarea class="d-textarea" id="Dialtone--TextareaExample1" type="text" placeholder="" />
<span class="d-description"></span>

Validation States

Provides feedback to the user based on their interction, or lack thereof, with an input.

Warning

Warns the user that the value(s) they've entered has a potential problem, but it doesn't block them from proceeding with input submission.

Provide an email address or phone number.
Enter an email address to send invite someone.
.textarea-example {
.d-textarea();
.d-textarea--warning();
}
.textarea-message-example {
.d-input-message();
.d-input-message--warning();
}

Error

Alerts the user that the value(s) they've entered is incorrect, not provided, or has some issue that will block them from proceeding with input submission.

Provide an email address or phone number.
You must enter an email address to send an invite.
.textarea-example {
.d-textarea();
.d-textarea--error();
}
.textarea-message-example {
.d-input-message();
.d-input-message--error();
}

Success

Notifies the user that the value(s) they've entered is correct.

Provide an email address or phone number.
You've entered an email!
.textarea-example {
.d-textarea();
.d-textarea--success();
}
.textarea-message-example {
.d-input-message();
.d-input-message--success();
}

Sizes

Name Class Size Example
Extra Small .d-textarea--xs 12px
Small .d-textarea--sm 14px
Default N/A 16px
Large .d-textarea--lg 20px
Extra Large .d-textarea--xl 24px