Input
View StorybookAn input field is an input control that allows users to enter alphanumeric information. It can have a range of options and supports single line and multi-line lengths, as well as varying formats, including numbers, masked passwords, etc.
Classes
Class | Applies to | Description |
---|
Examples
Base Styles
An input is normally paired with a label, but there are times when it can be used without a label. Placeholder text should primarily be used as a content prompt and only provided when needed.
<div>
<label class="d-label" for="Dialtone--InputExample1a">...</label>
<input class="d-input" id="Dialtone--InputExample1a" type="text" placeholder="..." />
</div>
<div>
<label class="d-label" for="Dialtone--InputExample1b">...</label>
<input class="d-input" id="Dialtone--InputExample1b" type="text" placeholder="..." disabled />
</div>
<div>
<label class="d-label" for="Dialtone--TextareaExample1a">...</label>
<textarea class="d-textarea" id="Dialtone--TextareaExample1a" type="text" placeholder="..."></textarea>
</div>
<div>
<label class="d-label" for="Dialtone--TextareaExample1b">...</label>
<textarea class="d-textarea" id="Dialtone--TextareaExample1b" type="text" placeholder="..." disabled></textarea>
</div>
With Description Text
<label class="d-label" for="Dialtone--InputExample2">...</label>
<span class="d-description">...</span>
<input class="d-input" id="Dialtone--InputExample2" type="text" placeholder="..." />
<label class="d-label" for="Dialtone--TextareaExample">...</label>
<span class="d-description">...</span>
<textarea class="d-textarea" id="Dialtone--TextareaExample" type="text" placeholder="..."></textarea>
With Validation States
Provides feedback to the user based on their interaction, or lack thereof, with an input.
<div>
<label class="d-label" for="Dialtone--InputExample3">...</label>
<input class="d-input d-input--error" id="Dialtone--InputExample3" type="email" placeholder="..." value="..." />
<span class="d-validation-message d-validation-message--error">...</span>
</div>
<div>
<label class="d-label" for="Dialtone--InputExample4">...</label>
<input class="d-input d-input--success" id="Dialtone--InputExample4" type="email" placeholder="..." value="..." />
<span class="d-validation-message d-validation-message--success">...</span>
</div>
<div>
<label class="d-label" for="Dialtone--InputExample5">...</label>
<input class="d-input d-input--warning" id="Dialtone--InputExample5" type="email" placeholder="..." value="..." />
<span class="d-validation-message d-validation-message--warning">...</span>
</div>
<div>
<label class="d-label" for="Dialtone--TextareaExample3">...</label>
<textarea class="d-textarea d-textarea--error" id="Dialtone--TextareaExample3" type="email" placeholder="..." value="..."></textarea>
<span class="d-validation-message d-validation-message--error">...</span>
</div>
<div>
<label class="d-label" for="Dialtone--TextareaExample4">...</label>
<textarea class="d-textarea d-textarea--success" id="Dialtone--TextareaExample4" type="email" placeholder="..." value="..."></textarea>
<span class="d-validation-message d-validation-message--success">...</span>
</div>
<div>
<label class="d-label" for="Dialtone--TextareaExample5">...</label>
<textarea class="d-textarea d-textarea--warning" id="Dialtone--TextareaExample5" type="email" placeholder="..." value="..."></textarea>
<span class="d-validation-message d-validation-message--warning">...</span>
</div>
With Icons
<div>
<label class="d-label" for="Dialtone--InputExample--IconLeft">...</label>
<div class="d-input__wrapper">
<span class="d-input-icon d-input-icon--left">...</span>
<input class="d-input d-input-icon--left" id="Dialtone--InputExample--IconLeft" type="text" placeholder="..." />
</div>
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--IconRight">...</label>
<div class="d-input__wrapper">
<span class="d-input-icon d-input-icon--right">...</span>
<input class="d-input d-input-icon--right" id="Dialtone--InputExample--IconRight" type="text" placeholder="..." />
</div>
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--IconLeft">...</label>
<div class="d-input__wrapper">
<span class="d-input-icon d-input-icon--left">...</span>
<textarea class="d-textarea d-input-icon--left" id="Dialtone--InputExample--IconLeft" type="text" placeholder="..."></textarea>
</div>
</div>
Input Sizes
We offer different sizes for instances in which the interface requires a smaller or larger input. In general, though, use the base (medium) size input as much as possible, especially in forms.
<div>
<label class="d-label" for="Dialtone--InputExample--ExtraSmall">...</label>
<input class="d-input d-input--xs" id="Dialtone--InputExample--ExtraSmall" type="text" placeholder="..." />
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--Small">...</label>
<input class="d-input d-input--sm" id="Dialtone--InputExample--Small" type="text" placeholder="..." />
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--Base">...</label>
<input class="d-input" id="Dialtone--InputExample--Base" type="text" placeholder="..." />
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--Large">...</label>
<input class="d-input d-input--lg" id="Dialtone--InputExample--Large" type="text" placeholder="..." />
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--ExtraLarge">...</label>
<input class="d-input d-input--xl" id="Dialtone--InputExample--ExtraLarge" type="text" placeholder="..." />
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--ExtraSmall">...</label>
<textarea class="d-textarea d-textarea--xs" id="Dialtone--InputExample--ExtraSmall" type="text" placeholder="..."></textarea>
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--Small">...</label>
<textarea class="d-textarea d-textarea--sm" id="Dialtone--InputExample--Small" type="text" placeholder="..."></textarea>
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--Base">...</label>
<textarea class="d-textarea" id="Dialtone--InputExample--Base" type="text" placeholder="..."></textarea>
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--Large">...</label>
<textarea class="d-textarea d-textarea--lg" id="Dialtone--InputExample--Large" type="text" placeholder="..."></textarea>
</div>
<div>
<label class="d-label" for="Dialtone--InputExample--ExtraLarge">...</label>
<textarea class="d-textarea d-textarea--xl" id="Dialtone--InputExample--ExtraLarge" type="text" placeholder="..."></textarea>
</div>
Icon Sizes
You may use different icon sizes in different sized inputs
<label class="d-label" for="Dialtone--InputExample--IconLeft">Input:sm Icon:lg</label>
<div class="d-input__wrapper">
<!-- note you must put the d-input--sm class on the icon element as well as the input -->
<span class="d-input-icon d-input-icon--left d-input--sm d-input-icon--lg"><icon-send /></span>
<input class="d-input d-input-icon--left d-input--sm" id="Dialtone--InputExample--IconLeft-sm-lg" type="text" placeholder="Placeholder" />
</div>
<label class="d-label" for="Dialtone--InputExample--IconLeft">Input:md(default), Icon:xl</label>
<div class="d-input__wrapper">
<span class="d-input-icon d-input-icon--left d-input-icon--xl"><icon-send /></span>
<input class="d-input d-input-icon--left" id="Dialtone--InputExample--IconLeft-md-xl" type="text" placeholder="Placeholder" />
</div>
<label class="d-label" for="Dialtone--InputExample--IconLeft">Input:xl Icon:md(default)</label>
<div class="d-input__wrapper">
<span class="d-input-icon d-input-icon--left d-input--xl"><icon-send /></span>
<input class="d-input d-input-icon--left d-input--xl" id="Dialtone--InputExample--IconLeft-xl-md" type="text" placeholder="Placeholder" />
</div>
<label class="d-label" for="Dialtone--InputExample--IconLeft">Textarea:lg Icon:md(default)</label>
<div class="d-input__wrapper">
<span class="d-input-icon d-input-icon--left d-input--lg"><icon-send /></span>
<textarea class="d-textarea d-input-icon--left d-textarea--lg" id="Dialtone--TextareaExample--IconLeft-lg-md" type="text" placeholder="Placeholder"></textarea>
</div>
Accessibility
- Make sure the
label
for
attribute match the inputid
. - Avoiding removing
labels
. Labelled inputs are user-friendly. - Avoid relying on placeholder text as a substitute for a
label
. - If the input is a required field, use the
aria-required
property and use the validation message for input errors. - Input with validation errors should have
aria-describedby
with theid
of the validation message. - Placeholder text should not include critical information. Use description text for any information that helps the user successfully interact with the input.