Form Elements

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

Related Patterns


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
$
KG
$
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
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
AUD $
KG
KG
HTML

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
AUD $
KG
HTML

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
HTML

CSS Classes:

1. .form-select

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

Checkboxes and Radios

Design
HTML

As we use the native HTML elements for our checkbox and radio buttons, the same rules apply. Corresponding .form-labels must have a [for=""] which corresponds to the radio/checkbox's id.

CSS Classes:

1. .form-checkbox

  • The component class for our native checkbox component.

2. .form-radio

  • The component class for our native checkbox component.

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.

JS

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

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.