Compact Flagset is a compact multi-value selection control.
A set of on/off/true/false "flags" that renders itself either (a) as inline horizontal labelled checkboxes (1 per flag), or (b) as a button (with a badge indicating the count of "checked" flags when that number is > 0) that, on click, toggles the display of a menu of labelled checkbox items, depending on (a) the number of "flags" defined and (b) the value of attribute: "minFlagCountForButtonAndMenu" (which is defaulted to 2).
Intended as alternative to Combobox for use in situations where screen real estate is tight, like Combobox, a Compact Flagset functions as a single logical input for form submission purposes, its name as defined via the component's "name" attribute, and its value comprising a comma-separated list of the value(s) of the currently checked flags.
Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For more information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.
Related components: