An official website of the United States GovernmentSelect Multi
May require JavaScriptOverview
Make one or more selections from structured scrollable list of otpions.
Preview
View Kitchen SinkThe Select Multi component provides an easy way to have a scrollable list of options to select from, while also having the option to Select All. It can be viewed as an alternate to using theSelect component.
Its most common usage is as a nested component of theForm Fields component.
- First Group
- Second Group
- Third Group
Variants
Default
<divclass="fsa-select-multi"><ulclass="fsa-select-multi__list"><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_one"type="checkbox"name="default_one"value="One"checked=""><labelclass="fsa-select-multi__label"for="default_one">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_two"type="checkbox"name="default_two"value="Two"><labelclass="fsa-select-multi__label"for="default_two">Two</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_three"type="checkbox"name="default_three"value="Three"checked=""><labelclass="fsa-select-multi__label"for="default_three">Three</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_four"type="checkbox"name="default_four"value="Four"checked=""><labelclass="fsa-select-multi__label"for="default_four">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_five"type="checkbox"name="default_five"value="Five"><labelclass="fsa-select-multi__label"for="default_five">Five</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_six"type="checkbox"name="default_six"value="Six"><labelclass="fsa-select-multi__label"for="default_six">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_seven"type="checkbox"name="default_seven"value="Seven"><labelclass="fsa-select-multi__label"for="default_seven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_eight"type="checkbox"name="default_eight"value="Eight"><labelclass="fsa-select-multi__label"for="default_eight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_nine"type="checkbox"name="default_nine"value="Nine"><labelclass="fsa-select-multi__label"for="default_nine">Nine</label></li></ul></div>Radio
<divclass="fsa-select-multi"><ulclass="fsa-select-multi__list"><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_one"type="radio"name="select_radio_example"value="One"><labelclass="fsa-select-multi__label"for="radio_default_one">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_two"type="radio"name="select_radio_example"value="Two"checked=""><labelclass="fsa-select-multi__label"for="radio_default_two">Two</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_three"type="radio"name="select_radio_example"value="Three"><labelclass="fsa-select-multi__label"for="radio_default_three">Three</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_four"type="radio"name="select_radio_example"value="Four"><labelclass="fsa-select-multi__label"for="radio_default_four">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_five"type="radio"name="select_radio_example"value="Five"><labelclass="fsa-select-multi__label"for="radio_default_five">Five</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_six"type="radio"name="select_radio_example"value="Six"><labelclass="fsa-select-multi__label"for="radio_default_six">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_seven"type="radio"name="select_radio_example"value="Seven"><labelclass="fsa-select-multi__label"for="radio_default_seven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_eight"type="radio"name="select_radio_example"value="Eight"><labelclass="fsa-select-multi__label"for="radio_default_eight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-radio fsa-select-multi__check"id="radio_default_nine"type="radio"name="select_radio_example"value="Nine"><labelclass="fsa-select-multi__label"for="radio_default_nine">Nine</label></li></ul></div>Grouped
As this component can be an alternate to using theSelect component, this variant effectively emulates the<optgroup> element of a<select>.
- First Group
- Second Group
- Third Group
<divclass="fsa-select-multi"><ulclass="fsa-select-multi__list"><liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4"> First Group</li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_one"type="checkbox"name="opt-group-example_one"value="One"checked=""><labelclass="fsa-select-multi__label"for="opt-group-example_one">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_two"type="checkbox"name="opt-group-example_two"value="Two"><labelclass="fsa-select-multi__label"for="opt-group-example_two">Two</label></li><liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4"> Second Group</li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplehree"type="checkbox"name="opt-group-examplehree"value="Three"checked=""><labelclass="fsa-select-multi__label"for="opt-group-examplehree">Three</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefour"type="checkbox"name="opt-group-examplefour"value="Four"checked=""><labelclass="fsa-select-multi__label"for="opt-group-examplefour">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefive"type="checkbox"name="opt-group-examplefive"value="Five"><labelclass="fsa-select-multi__label"for="opt-group-examplefive">Five</label></li><liclass="fsa-select-multi__item fsa-select-multi__item--group"role="heading"aria-level="4"> Third Group</li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-example_six"type="checkbox"name="opt-group-example_six"value="Six"><labelclass="fsa-select-multi__label"for="opt-group-example_six">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleeven"type="checkbox"name="opt-group-exampleeven"value="Seven"><labelclass="fsa-select-multi__label"for="opt-group-exampleeven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleight"type="checkbox"name="opt-group-exampleight"value="Eight"><labelclass="fsa-select-multi__label"for="opt-group-exampleight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplenine"type="checkbox"name="opt-group-examplenine"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplenine">Nine</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleten"type="checkbox"name="opt-group-exampleten"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-exampleten">Ten</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleeleven"type="checkbox"name="opt-group-exampleeleven"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-exampleeleven">Eleven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampletwelve"type="checkbox"name="opt-group-exampletwelve"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-exampletwelve">Twelve</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplethirteen"type="checkbox"name="opt-group-examplethirteen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplethirteen">Thirteen</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefourteen"type="checkbox"name="opt-group-examplefourteen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplefourteen">Fourteen</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplefifteen"type="checkbox"name="opt-group-examplefifteen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplefifteen">Fifteen</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-examplesixteen"type="checkbox"name="opt-group-examplesixteen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-examplesixteen">Sixteen</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="opt-group-exampleseventeen"type="checkbox"name="opt-group-exampleseventeen"value="Nine"><labelclass="fsa-select-multi__label"for="opt-group-exampleseventeen">Seventeen</label></li></ul></div>Select All
Usedata-behavior="select-multi select-multi-all" to trigger the JavaScript to select or unselect all options.*See JavaScript Guidance.
<divclass="fsa-select-multi"id="UNIQUE-ID-A04AE3BF636B6CBC"><ulclass="fsa-select-multi__list"><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-selectall"data-behavior="select-multi select-multi-all"type="checkbox"name="selectall"value="ALL"><labelclass="fsa-select-multi__label"for="sa-selectall">Select all</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_one"data-behavior="select-multi"type="checkbox"name="sa-default_one"value="One"checked=""><labelclass="fsa-select-multi__label"for="sa-default_one">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_two"data-behavior="select-multi"type="checkbox"name="sa-default_two"value="Two"><labelclass="fsa-select-multi__label"for="sa-default_two">Two</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_three"data-behavior="select-multi"type="checkbox"name="sa-default_three"value="Three"checked=""><labelclass="fsa-select-multi__label"for="sa-default_three">Three</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_four"data-behavior="select-multi"type="checkbox"name="sa-default_four"value="Four"checked=""><labelclass="fsa-select-multi__label"for="sa-default_four">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_five"data-behavior="select-multi"type="checkbox"name="sa-default_five"value="Five"><labelclass="fsa-select-multi__label"for="sa-default_five">Five</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_six"data-behavior="select-multi"type="checkbox"name="sa-default_six"value="Six"><labelclass="fsa-select-multi__label"for="sa-default_six">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_seven"data-behavior="select-multi"type="checkbox"name="sa-default_seven"value="Seven"><labelclass="fsa-select-multi__label"for="sa-default_seven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_eight"data-behavior="select-multi"type="checkbox"name="sa-default_eight"value="Eight"><labelclass="fsa-select-multi__label"for="sa-default_eight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="sa-default_nine"data-behavior="select-multi"type="checkbox"name="sa-default_nine"value="Nine"><labelclass="fsa-select-multi__label"for="sa-default_nine">Nine</label></li></ul></div>Within aField
<divclass="fsa-field"><labelclass="fsa-field__label"for="UNIQUE-ID-hshhsjtext">Label</label><divclass="fsa-select-multi fsa-field__item"><ulclass="fsa-select-multi__list"id="UNIQUE-ID-hshhsjtext"aria-describedby="lorem-hshhsjtext-help-4"><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_one"type="checkbox"name="default-loskss4ga_one"value="One"checked=""><labelclass="fsa-select-multi__label"for="default-loskss4ga_one">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_two"type="checkbox"name="default-loskss4ga_two"value="Two"><labelclass="fsa-select-multi__label"for="default-loskss4ga_two">Two</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_three"type="checkbox"name="default-loskss4ga_three"value="Three"checked=""><labelclass="fsa-select-multi__label"for="default-loskss4ga_three">Three</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_four"type="checkbox"name="default-loskss4ga_four"value="Four"checked=""><labelclass="fsa-select-multi__label"for="default-loskss4ga_four">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_five"type="checkbox"name="default-loskss4ga_five"value="Five"><labelclass="fsa-select-multi__label"for="default-loskss4ga_five">Five</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_six"type="checkbox"name="default-loskss4ga_six"value="Six"><labelclass="fsa-select-multi__label"for="default-loskss4ga_six">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_seven"type="checkbox"name="default-loskss4ga_seven"value="Seven"><labelclass="fsa-select-multi__label"for="default-loskss4ga_seven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_eight"type="checkbox"name="default-loskss4ga_eight"value="Eight"><labelclass="fsa-select-multi__label"for="default-loskss4ga_eight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default-loskss4ga_nine"type="checkbox"name="default-loskss4ga_nine"value="Nine"><labelclass="fsa-select-multi__label"for="default-loskss4ga_nine">Nine</label></li></ul></div><spanclass="fsa-field__help"id="lorem-hshhsjtext-help-4">Instructional message here</span></div>States
Disabled, all
<divclass="fsa-select-multi fsa-select-multi--disabled"id="UNIQUE-ID-hshsj55035d00"><ulclass="fsa-select-multi__list"><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_one"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_one"value="One"checked=""><labelclass="fsa-select-multi__label"for="sa-default_6az73_one">One</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_two"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_two"value="Two"><labelclass="fsa-select-multi__label"for="sa-default_6az73_two">Two</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_three"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_three"value="Three"checked=""><labelclass="fsa-select-multi__label"for="sa-default_6az73_three">Three</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_four"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_four"value="Four"checked=""><labelclass="fsa-select-multi__label"for="sa-default_6az73_four">Four</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_five"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_five"value="Five"><labelclass="fsa-select-multi__label"for="sa-default_6az73_five">Five</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_six"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_six"value="Six"><labelclass="fsa-select-multi__label"for="sa-default_6az73_six">Six</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_seven"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_seven"value="Seven"><labelclass="fsa-select-multi__label"for="sa-default_6az73_seven">Seven</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_eight"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_eight"value="Eight"><labelclass="fsa-select-multi__label"for="sa-default_6az73_eight">Eight</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="sa-default_6az73_nine"data-behavior="select-multi"type="checkbox"name="sa-default_6az73_nine"value="Nine"><labelclass="fsa-select-multi__label"for="sa-default_6az73_nine">Nine</label></li></ul></div>Disabled, some
Items “One” and “Four” below are disabled.
<divclass="fsa-select-multi"><ulclass="fsa-select-multi__list"><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFone"type="checkbox"name="1default_ASDFone"value="One"checked=""><labelclass="fsa-select-multi__label"for="1default_ASDFone">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFtwo"type="checkbox"name="1default_ASDFtwo"value="Two"><labelclass="fsa-select-multi__label"for="1default_ASDFtwo">Two</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFthree"type="checkbox"name="1default_ASDFthree"value="Three"checked=""><labelclass="fsa-select-multi__label"for="1default_ASDFthree">Three</label></li><liclass="fsa-select-multi__item"><inputdisabledclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFfour"type="checkbox"name="1default_ASDFfour"value="Four"checked=""><labelclass="fsa-select-multi__label"for="1default_ASDFfour">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFfive"type="checkbox"name="1default_ASDFfive"value="Five"><labelclass="fsa-select-multi__label"for="1default_ASDFfive">Five</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFsix"type="checkbox"name="1default_ASDFsix"value="Six"><labelclass="fsa-select-multi__label"for="1default_ASDFsix">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFseven"type="checkbox"name="1default_ASDFseven"value="Seven"><labelclass="fsa-select-multi__label"for="1default_ASDFseven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFeight"type="checkbox"name="1default_ASDFeight"value="Eight"><labelclass="fsa-select-multi__label"for="1default_ASDFeight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="1default_ASDFnine"type="checkbox"name="1default_ASDFnine"value="Nine"><labelclass="fsa-select-multi__label"for="1default_ASDFnine">Nine</label></li></ul></div>Error
<divclass="fsa-select-multi fsa-select-multi--error"><ulclass="fsa-select-multi__list"><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_one"type="checkbox"name="default_error_one"value="One"checked=""><labelclass="fsa-select-multi__label"for="default_error_one">One</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_two"type="checkbox"name="default_error_two"value="Two"><labelclass="fsa-select-multi__label"for="default_error_two">Two</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_three"type="checkbox"name="default_error_three"value="Three"checked=""><labelclass="fsa-select-multi__label"for="default_error_three">Three</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_four"type="checkbox"name="default_error_four"value="Four"checked=""><labelclass="fsa-select-multi__label"for="default_error_four">Four</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_five"type="checkbox"name="default_error_five"value="Five"><labelclass="fsa-select-multi__label"for="default_error_five">Five</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_six"type="checkbox"name="default_error_six"value="Six"><labelclass="fsa-select-multi__label"for="default_error_six">Six</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_seven"type="checkbox"name="default_error_seven"value="Seven"><labelclass="fsa-select-multi__label"for="default_error_seven">Seven</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_eight"type="checkbox"name="default_error_eight"value="Eight"><labelclass="fsa-select-multi__label"for="default_error_eight">Eight</label></li><liclass="fsa-select-multi__item"><inputclass="fsa-checkbox fsa-select-multi__check"id="default_error_nine"type="checkbox"name="default_error_nine"value="Nine"><labelclass="fsa-select-multi__label"for="default_error_nine">Nine</label></li></ul></div>Usage
Use
- In place of the
multipleattribute of a<select>element. - When multiple options need to be shown to the User at one time, while all options are selectable.
- If the application requires a mechanism to select all or none of the options.
Don’t Use
- If the options only allow for one selection, and instead use a list ofRadio Buttons.
- If the list of options is very long. Let users type the same information into atext input that suggests possible options instead.
UI Component
Checkbox
Choose one or more options from a set of available values.
UI Component
Form Fields
Data entry from a variety of structured form controls.
UI Component
Radio
Choose a single option from a set of available values.
Accessibility
Always refer to theAccessibility Forms Guide for overall guidance.
- If you customize the select element, ensure they continue to meet the the accessibility requirements that apply to all form controls.
- Make sure your select elements have an accessible label.
General Guidance
- Just like with other checkbox elements, all Select Multi options require their own unique ID and a corresponding
forattribute within the LABEL tag. - A Unique ID is also required for the top-level DIV tag which contains the
class="fsa-select-multi"attribute.
JavaScript Guidance
Disclaimer
All JavaScript included in the Design System's CSS Framework,fsa-style, arenot approved for Production use. Their role is purely fordemonstration purposes only, providing development teams with the inspiration, reference, and guidance to fully implement a component's UI behavior.
Script demonstrations are primarily UI-oriented, typically manipulating the HTML in basic ways (i.e.DOM Scripting). Two frequent examples:
- Adding and/or removing a class, e.g.
addClass('component-name--active') - Adding and/or removing an attribute, e.g.
setAttribute('aria-expanded', 'false')
Summary
Use of the “Select all” feature uses a series of conditional statements to determine which checkbox items need to be updated based on their current state, the state of their peers, and the state of their direct parent container. The indeterminate state of a checkbox item is an indication that shows all child checkbox items are of a mix of checked and not checked. The totality of the children grouping of checkbox items is considered in this script. The indeterminate state can only be set via JavaScript, as there is no equivalent HTML-based property.
Select Checked State
.indeterminateproperty of parent is true if all siblings are checked.checkedproperty is true
Select Unchecked State
.indeterminateproperty of parent is false if all siblings are unchecked.checkedproperty is false
Select Indeterminate State
.indeterminateproperty is true if at least one child is checked and at least one child is unchecked.checkedproperty to false