Native multiselect inputs can be confusing for users as operating systems differ on which keys are used to select multiple options. These custom multiselects contain a set of checkbox options, presented via Bootstrap’s .c-checkbox-sm custom-styled inputs. Since multiple items can be selected the primary option does not update the name when the dropdown is closed so the name of the dropdown should be clear so users know what type of options they can expect.

Examples

Multiselect Legend

Multiselect Legend
Group Subhead
Group Subhead
Group Subhead

Multiselect Legend
Helper or instructional text for the input

Multiselect Legend

Usage

Rules

  • It is recommended that the Custom Multiselect be used in combination with chiclets or another element that exposes to users what items are selected when the dropdown is closed
  • Ensure that the multiselect text is concise and explains what a user should do with the input

Constraints

  • Multiselects are a custom element so there is not a default browser-rendered UI
  • Place a faux label above if necessary, otherwise the visible label within the element should be descriptive for the options contained within

Principles

  • Multiselects allow a potentially large number of choices to be presented in a succinct way in order that a user can easily select multiple options

Accessibility

  • Always include .label-help text when an input requires explanation for expected formatting or error correction
  • The multiselect() method used in the Core javascript will automatically add aria-expanded="false" to each .multiselect-btn and aria-hidden="true" to each dropdown, and toggle each to the correct state as the multiselect opens and closes
  • A .multiselect should have role="listbox" to indicate that it contains a list of one or more selectable items
  • A .multiselect-btn requires aria-controls="IDReference" with the corresponding ID on its .multiselect-wrap that button toggles. If using a label-help below the button, also add a aria-describedby="IDReference" where the corresponding ID is on the help text.
  • The multiselect-group should be a <fieldset> and begin with a corresponding <legend>. Since the label for the multiselect is not updated the legend can contain additional context for each choice.
  • A .multiselect-subheading precedes a group of multiselect choices (similar to a native <select>’s <optgroup>). Each input/choice that relates to the .multiselect-subheading should use aria-describedby="IDReference" where the ID matches that of the subheading—this provides additional context for each choice.

Class Names

multiselect
Required

Used on the parent multiselect container
multiselect-btn
Required

Used on the <button> that functions as the toggle
multiselect-group
Required

Used on the <fieldset> that contains the options
has-danger
Modifier

Use on the .form-group to flag the input as error, it‘s recommended to include .label-help helper text to clarify the error