Base style

Section titled 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.

<!-- Base -->
<div class="d-flex gy4 fd-column">
    <label class="s-label" for="example-item1">Full name</label>
    <p class="s-description mtn2 mb0">This will be shown only to employers and other Team members.</p>
    <input class="s-input" id="example-item1" type="text" placeholder="Enter your input here" />
</div>

<!-- Disabled -->
<div class="d-flex gy4 fd-column">
    <label class="s-label" for="example-item2">Display name</label>
    <div class="d-flex ps-relative">
        <input class="s-input" id="example-item2" type="text" placeholder="Enter your input here" disabled />
        {% icon "Lock", "s-input-icon fc-black-400" %}
    </div>
</div>

<!-- Readonly -->
<div class="d-flex gy4 fd-column ps-relative is-readonly">
    <label class="s-label" for="example-item3">Legal name</label>
    <div class="d-flex ps-relative">
        <input class="s-input" id="example-item3" type="text" placeholder="Enter your input here" readonly value="Prefilled readonly input" />
        {% icon "Lock", "s-input-icon" %}
    </div>
</div>

Full name

This will be shown only to employers and other Team members.

Display name

Legal name

Accessibility

Section titled Accessibility

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 id attribute.
Be sure to associate the input’s label by using the for attribute. The value here is the input’s id.
If you have a group of related inputs, use the fieldset and legend to group them together.

For more information, please read Gov.UK's article, "Using the fieldset and legend elements".

Required input fields

Section titled Required input fields

Labels or instructions must be provided when content requires user input. For any input field within a form that is required for successful data submission, provide the asterisk * as a symbol and a legend advising the meaning of the symbol before the first use.

Stacks includes a special .s-required-symbol class to ensure the symbol (asterisk) is clearly visible.

Class	Applies	Definition
`.s-required-symbol`	`abbr` element enclosing the asterisk	Used to style the asterisk indicating that a specific field is required.

<abbr class="s-required-symbol" title="required">*</abbr>

Required symbols are not necessary for areas where only a single input field is seen on the page (ex: sign up modals). For more information, see WCAG Technique H90.

Required input fields example

Section titled Required input fields example

<div class="d-flex w100 jc-space-between ai-center">
    <h1 class="fs-headline1 fw-normal mb16">
        Ask a question
    </h1>
    <p class="fs-caption fc-black-400">Required fields<abbr class="s-required-symbol" title="required">*</abbr></p>
</div>
<form class="d-flex fd-column gy16">
    <div class="d-flex gy4 fd-column">
        <label class="s-label" for="example-title-required">Title<abbr class="s-required-symbol" title="required">*</abbr></label>
        <input class="s-input" id="example-title-required" type="text" placeholder="Type a title" />
    </div>
    <div class="d-flex gy4 fd-column">
        <label class="s-label" for="example-body-required">Body<abbr class="s-required-symbol" title="required">*</abbr></label>
        <textarea class="s-textarea hmn1" id="example-body-required" placeholder="Type a question"></textarea>
    </div>
    <div class="d-flex gy4 fd-column">
        <label class="s-label" for="example-ask-members">Ask team members</label>
        <input class="s-input" id="example-ask-members" type="text" placeholder="Type a name" />
    </div>
</form>

Ask a question

Required fields*

Validation states

Section titled Validation states

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.

Validation classes

Section titled Validation classes

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.

Validation guidance

Section titled Validation guidance

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.

Similarly to using for with labels, validation messages below inputs should be associated with their respective fields using the aria-describedby attribute for accessible behavior.

Validation examples

Section titled Validation examples

Warning

Section titled Warning

<div class="d-flex gy4 fd-column has-warning">
    <label class="flex--item s-label" for="example-warning">Username</label>
    <div class="d-flex ps-relative">
        <input class="s-input" id="example-warning" type="text" placeholder="" aria-describedby="example-warning-desc" />
        @Svg.Alert.With("s-input-icon")
    </div>
    <p id="example-warning-desc" class="flex--item s-input-message mb0">Caps lock is on! <a href="#">Having trouble entering your username?</a></p>
</div>

Username

Caps lock is on! Having trouble entering your username?

Error

Section titled Error

In addition to using the "error" state for a field, be sure to use the aria-invalid attribute to indicate to assistive technology that respective fields have failed validation.

<div class="d-flex gy4 fd-column has-error">
    <label class="flex--item s-label" for="example-error">Username</label>
    <div class="d-flex ps-relative">
        <input class="s-input" id="example-error" type="text" placeholder="e.g. johndoe111" aria-describedby="example-error-desc" aria-invalid="true" />
        @Svg.AlertCircle.With("s-input-icon")
    </div>
    <p id="example-error-desc" class="flex--item s-input-message mb0">You must provide a username. <a href="#">Forgot your username?</a></p>
</div>

Username

You must provide a username. Forgot your username?

Success

Section titled Success

<div class="d-flex gy4 fd-column has-success">
    <label class="flex--item s-label" for="example-success">Username</label>
    <div class="d-flex ps-relative">
        <input class="s-input" id="example-success" type="text" aria-describedby="example-success-desc" />
        @Svg.Checkmark.With("s-input-icon")
    </div>
    <p id="example-success-desc" class="flex--item s-input-message mb0">That name is available! <a href="#">Why do we require a username?</a></p>
</div>

Username

That name is available! Why do we require a username?

Icons

Section titled Icons

Search

Section titled Search

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">
    <label class="v-visible-sr" for="example-search">Search</label>
    <input class="s-input s-input__search" id="example-search" type="text" placeholder="Search…" />
    @Svg.Search.With("s-input-icon s-input-icon__search")
</div>

Search

Credit Card

Section titled Credit Card

<div class="ps-relative">
    <label class="v-visible-sr" for="example-creditcard">Credit Card</label>
    <input class="s-input s-input__creditcard" id="example-creditcard" type="text" />
    @Svg.CreditCard.With("s-input-icon s-input-icon__creditcard")
</div>

Credit Card

Sizes

Section titled Sizes

Name	Size	Class
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

Section titled Input fills

Input fills are used to visually connect input text boxes with related content.

Prepended inputs

Section titled Prepended inputs

<div class="d-flex gy4 fd-column">
    <label class="flex--item s-label" for="website-url">Website URL</label>
    <div class="d-flex">
        <div class="flex--item s-input-fill order-first">https://</div>
        <div class="d-flex fl-grow1 ps-relative">
            <input class="flex--item s-input blr0" type="text" id="website-url" placeholder="www.stackoverflow.com" />
        </div>
    </div>
</div>

Website URL

https://

Appended inputs

Section titled Appended inputs

<div class="d-flex gy4 fd-column">
    <label class="flex--item s-label" for="min-salary">Minimum Salary</label>
    <div class="d-flex">
        <div class="d-flex ai-center order-last s-input-fill">
            <div class="d-flex gx4 ai-center">
                <input class="flex--item s-checkbox" type="checkbox" id="need-visa" />
                <label class="flex--item s-label s-label__sm fw-normal" for="need-visa">Need Visa Sponsorship</label>
            </div>
        </div>
        <div class="d-flex fl-grow1 ps-relative">
            <input class="flex--item s-input brr0" type="number" id="min-salary" placeholder="e.g. 125,000" />
        </div>
    </div>
</div>

Minimum Salary

Need Visa Sponsorship

Nested inputs

Section titled Nested inputs

An input can be nested within a container that has the .s-input class applied to display styled elements as if they're within an input.

<div class="d-flex fd-column g4">
    <label class="s-label" for="tag-selector">Tags</label>
    <div class="s-input d-flex fw-wrap g8">
        <span>
            <span class="s-tag">
                svelte
                <button class="s-tag--dismiss" type="button" title="Remove tag">@Svg.ClearSm</button>
            </span>
        </span>
        <input
            id="tag-selector"
            class="s-input bc-transparent bs-none p0 wmn1"
            type="text"
            …>
    </div>
</div>

Sections

Inputs

Base style

Accessibility

Required input fields

Required input fields example

Ask a question

Validation states

Validation classes

Validation guidance

Validation examples

Warning

Error

Success

Icons

Search

Credit Card

Sizes

Input fills

Prepended inputs

Appended inputs

Nested inputs