Inputs

Input fields are text areas used to gather information from users. It can have a range of options and supports several text formats including numbers.

Base Style

Inputs 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.

This is something you can change later.
This is something you can change later.
<label class="d-label" for="Dialtone--InputExample1"></label>
<span class="d-description"></span>
<input class="d-input" id="Dialtone--InputExample1" type="text" placeholder="" />

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.

Caps lock is on. Having trouble with your email address?
.input-example {
.d-input();
.d-input--warning();
}
.input-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.

You must provide an email address to proceed. Forgot email address?
.input-example {
.d-input();
.d-input--error();
}
.input-message-example {
.d-input-message();
.d-input-message--error();
}

Success

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

That email address hasn't been used. Why do we require an email address?
.input-example {
.d-input();
.d-input--success();
}
.input-message-example {
.d-input-message();
.d-input-message--success();
}

Sizes

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