Form Elements

The structure and states for the various form elements used in the BigCommerce Pattern Lab and applications.

Related Patterns

Credit Card Form

The Form

HTML

CSS Classes:

As we don't style elements directly, the presence of the following form classes are extremely important.

1. .form

The container class for the form component. Must be applied to the wrapping form element.

2. .form-fieldset

Logical groups of form elemets must be wrapped in a fieldset.form-fieldset. There must be at least one fieldset present per form.

Form Rows

Design

Input Label

Native Select label

Input Label

Prefixed Label

Input Label

Postfixed Label

Input Label

Prefixed Label

HTML

CSS Classes:

This is a useful component for trying to create flexible form layouts, but should be used with caution due to flexbox support. If in doubt, you should style your form using the grid mixins.

1. .form-row

Container class which is applied to the container element of a group of horizontally aligned form fields.
Do not align more than four form fields using this method, for usability purposes.
Form field widths are equally divided by flexbox. Be wary of browser support when using this component.

Input Fields

Design

Input Label

Readonly Input

Disabled Input

Textarea Label additional context

Input with Required Label Required*

Number Input Label

HTML

CSS Classes:

As we don't style elements directly, the presence of the following form classes are extremely important.

1. .form-field

The container class for the form field component. Must be applied to the wrapping form element of the input and its corresponding label.
Modifications for the disabled state are styled using the :disabled pseudoclass, you should always use the attribute. No modifier class is necessary.
The above is also true for the readonly attribute.

2. .form-label and .form-input

Classes for the label and input elements. You must associate these with each other by using the [for=""] attribute in the label, which refers to the input's id.

Inputs with Pre/Postfixes

Design

Prefixed Label (Inc. tax)

AUD $

Postfixed Label

Postfixed Button

All of the things

HTML

<div class="form-field">
    <label class="form-label" for="input4">Prefixed Label <small>(Inc. tax)</small></label>
    <div class="form-prefixPostfix">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--prefix" id="prefixDesc1">AUD $</span>
        <input class="form-input form-prefixPostfix-input" id="input4" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc1">
    </div>
</div>

<div class="form-field">
    <label class="form-label" for="input5">Postfixed Label</label>
    <div class="form-prefixPostfix">
        <input class="form-input form-prefixPostfix-input" id="input5" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc2">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--postfix" id="prefixDesc2">KG</span>
    </div>
</div>

<div class="form-field">
    <label class="form-label" for="input7">Postfixed Button</label>
    <div class="form-prefixPostfix">
        <input class="form-input" id="input7" type="text" placeholder="Placeholder text">
        <input class="button form-prefixPostfix-button--postfix" type="submit" value="Save">
    </div>
</div>

<div class="form-field">
    <label class="form-label" for="input8">All of the things</label>
    <div class="form-prefixPostfix">
        <input class="form-input form-prefixPostfix-input" id="input8" type="text" placeholder="Placeholder text" aria-describedby="prefixDesc4">
        <span class="form-prefixPostfix-label form-prefixPostfix-label--postfix" id="prefixDesc5">KG</span>
        <input class="button button--primary form-prefixPostfix-button--postfix" type="submit" value="Save">
    </div>
</div>

CSS Classes:

1. .form-prefixPostfix

The container class for the form input component, which will have a prefix OR postfix. This container lives inside the form-field and contains a form-input and the prefixed/postfixed element.
This solution also uses flexbox to achieve the structure. Be aware of flexbox support for your browsers.

2. .form-prefixPostfix-input

The classname for the input component to which you are applying your pre/postfix.

2. .form-prefixPostfix-label

The classname for the component which will be pre/postfixed, using either the --postfix or --prefix modifier.
Note: While it is possible to apply a form-prefixPostfix-button--prefix, it is not recommended for usability purposes. Unless you are building an RTL interface.

Inputs with Inset Icons

Design

HTML

CSS Classes:

1. .has-action

The state class applied to the input which will have an inset icon as an action, meaning the button can be used to submit the value in the input. Particularly useful in search fields.

2. .button--inputAction

The modifier class applied to the sibling .button--icon of the input.has-action. The button follows the same format as the icon buttons.

1. .has-icon

The state class applied to the input which will have an inset icon as a non-interactive, informative icon. Simply place an .icon as a sibling to this element for the desired effect

Input Validation States

Design

Valid field

Invalid field Required*

This is not a valid email address

Warning field

Did you mean…

Select label

You must select a value

Checkbox label Checkbox 1 label Checkbox 2 label

Please select one or more

Radio label Radio 1 label Radio 2 label

Please select an option

Prefixed Label (Inc. tax)

AUD $

Please input a dollar amount

Postfixed Label

Please enter the weight in kilograms

Postfixed Button

This is a detailed error message explaining all the things that went wrong on this input field.
This is another line of error messaging.
And another line. You really messed up here.

HTML

<div class="form-field form-field--success">
    …
</div>
<div class="form-field form-field--error">
    …
</div>
<div class="form-field form-field--warning">
    …
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_simple">Invalid field</label>
    <input class="form-input" id="invalid_simple" type="text" value="Some Invalid text">
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_simple">
                This is not a valid email address
            </label>
        </li>
    </ul>
</div>

<div class="form-field form-field--error">
    <label class="form-label" for="invalid_simple">Invalid field</label>
    <input class="form-input" id="invalid_simple" type="text" value="Some Invalid text">
    <icon class="form-input-indicator" glyph="ic-error"></icon>
    <ul class="form-field-errors">
        <li class="form-field-error">
            <label class="form-inlineMessage" for="invalid_simple">
                This is not a valid email address
            </label>
        </li>
    </ul>
</div>

CSS Classes:

1. .form-field--success, .form-field--error and .form-field--warning

Modifier classes for the .form-field component. No need for further modifying, it takes care of child elements.

2. .form-inlineMessage

Applied to label element which is appended to the form-field to give descriptions of the problem to the user. Must be placed last.
Don't forget to associate the error label to the input using the [for] attribute, wherever possible.

Selects

Design

Native Select label

Native Select Multiple label

HTML

CSS Classes:

1. .form-select

The only required class for the native select styling. This is used for both [multiple] and single select.

Switches

Design

HTML

Usage:

1. .switch

The parent element that wraps the switch element. Append class switch--checked when switch is enabled.

2. .switch-description

Optional labels for both the on and off position of the switch. Depending on what is switched "on" or "off", append switch-description--on or switch-description--off. It should appear to the left and/or right of the switch-checkbox and switch-toggle.

3. .switch-checkbox

Hidden checkbox that is getting triggered by clicking on the switch. A related aria-describedby needs to also be added in to descript what the switch is doing.

4. .switch-toggle

Styled switch element that is linked to switch-checkbox.

Usage:

1. ng-model

This is a required attribute, and must be a boolean value.

2. toggle-off-label and toggle-on-label

Optional labels for both the on and off position of the switch.
Regardless of whether or not these are set, you should describe your switch using [aria-description].

3. has-icon

Optional setting which enables the tick/cross indicator for the switch.

4. left-description and right-description

Displays descriptions to the left/right of the switch, visible to the user.

Form Actions

Design

Notes:

Form actions contain the default actions for the form – like Submit, Reset or Cancel, for example.

Form actions can be displayed within a form panel, or act as the actions for the entire page by adding the form-actions--fixed modifier class to the form-actions element. It will then display as a fixed-position bar along the bottom of the page.

Regardless of display, the element should live inside the form.

HTML

Notes:

Form actions contain the default actions for the form – like Submit, Reset or Cancel, for example.

Regardless of display, the element should live inside the form.

Form Elements

Related Patterns

The Form

CSS Classes:

Form Rows

CSS Classes:

Input Fields

CSS Classes:

Inputs with Pre/Postfixes

CSS Classes:

Inputs with Inset Icons

CSS Classes:

Input Validation States

CSS Classes:

Selects

CSS Classes:

Checkboxes and Radios

CSS Classes:

Switches

Usage:

Usage:

Form Actions

Notes:

Notes: