Inputs
Input elements are used to gather information from users.
Inputs are normally paired with a label, but there times when they can be used without a label. Placeholder text should primarily be used as a content prompt and only provided when needed.
<div class="grid gs4 gsy fd-column">
<div class="grid--cell">
<label class="d-block s-label" for="example-item1">
Full name
<p class="s-description mt2">This will be shown only to employers and other Team members.</p>
</label>
</div>
<div class="grid ps-relative">
<input class="s-input" id="example-item1" type="text" placeholder="Enter your input here" />
</div>
</div>
<div class="grid gs4 gsy fd-column ps-relative">
<label class="grid--cell s-label" for="example-item2">Display name</label>
<div class="grid ps-relative">
<input class="s-input" id="example-item2" type="text" placeholder="Enter your input here" disabled />
@Svg.Lock.With("s-input-icon fc-black-300")
</div>
</div>The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they're correctly formatted. When it comes to inputs, there are a few things to keep in mind:
- All inputs should have an
idattribute. - Be sure to associate the input’s label by using the
forattribute. The value here is the input’sid. - If you have a group of related inputs, use the
fieldsetandlegendto group them together.
For more information, please read Gov.UK's article, "Using the fieldset and legend elements".
Validation states provides the user feedback based on their interaction (or lack of interaction) with an input. These styles are applied by applying the appropriate class to the wrapping parent container.
| Class | Applies | Definition |
|---|---|---|
.has-warning |
Parent wrapper for input | 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 input | 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 input | Used to notify users that the value they’ve entered is fine or has been submitted successfully. |
In most cases, validation states shouldn’t be shown until after the user has submitted the form. There are certain exceptions where it can be appropriate to show a validation state without form submission—after a sufficient delay. For example, validating the existence of a username can occur after the user has stopped typing, or when they’ve deselected the input.
Once the user is presented validation states, they can be cleared as soon as the user interacts with the form field. For example, the error state for an incorrect password should be cleared as soon as the user focuses the input to re-enter their password.
<div class="grid gs4 gsy fd-column has-warning">
<label class="grid--cell s-label" for="example-warning">Username</label>
<div class="grid ps-relative">
<input class="s-input" id="example-warning" type="text" placeholder="" />
@Svg.Alert.With("s-input-icon")
</div>
<p class="grid--cell s-input-message">Caps lock is on! <a>Having trouble entering your username?</a></p>
</div><div class="grid gs4 gsy fd-column has-error">
<label class="grid--cell s-label" for="example-warning">Username</label>
<div class="grid ps-relative">
<input class="s-input" id="example-warning" type="text" placeholder="e.g. johndoe111" />
@Svg.AlertCircle.With("s-input-icon")
</div>
<p class="grid--cell s-input-message">You must provide a username. <a>Forgot your username?</a></p>
</div><div class="grid gs4 gsy fd-column has-success">
<label class="grid--cell s-label" for="example-warning">Username</label>
<div class="grid ps-relative">
<input class="s-input" id="example-warning" type="text" />
@Svg.Checkmark.With("s-input-icon")
</div>
<p class="grid--cell s-input-message">That name is available! <a>Why do we require a username?</a></p>
</div>Stacks provides helper classes to consistently style an input used for search. First, wrap your search input in an element with relative positioning. Then, and add s-input__search to the input itself. Finally, be sure to add s-input-icon and s-input-icon__search to the search icon.
<div class="ps-relative">
<input class="s-input s-input__search" type="text" placeholder="Search…" />
@Svg.Search.With("s-input-icon s-input-icon__search")
</div><div class="ps-relative">
<input class="s-input s-input__creditcard" type="text" />
@Svg.CreditCard.With("s-input-icon s-input-icon__creditcard")
</div>| Name | Size | Class | Example |
|---|---|---|---|
| Small | 12px | .s-input__sm |
|
| Default | 13px | N/A | |
| Medium | 17px | .s-input__md |
|
| Large | 21px | .s-input__lg |
|
| Extra Large | 27px | .s-input__xl |
Input fills are used to visually connect input text boxes with related content.
<div class="grid gs4 gsy fd-column">
<label class="grid--cell s-label" for="website-url">Website URL</label>
<div class="grid">
<div class="grid--cell s-input-fill order-first">https://</div>
<div class="grid fl1 ps-relative">
<input class="grid--cell s-input blr0" type="text" id="website-url" placeholder="www.stackoverflow.com" />
</div>
</div>
</div><div class="grid gs4 gsy fd-column">
<label class="grid--cell s-label" for="min-salary">Minimum Salary</label>
<div class="grid">
<div class="grid ai-center order-last s-input-fill">
<div class="grid gs4 gsx ai-center">
<input class="grid--cell s-checkbox" type="checkbox" id="need-visa" />
<label class="grid--cell s-label s-label__sm fw-normal" for="need-visa">Need Visa Sponsorship</label>
</div>
</div>
<div class="grid fl1 ps-relative">
<input class="grid--cell s-input brr0" type="number" id="min-salary" placeholder="e.g. 125,000" />
</div>
</div>
</div>