Selecting multiple options
Multi-select is a commonly used design pattern that allows users to select multiple options from a list. This pattern is used in various contexts such as search filters, form fields, and more.
Small list
A simple list of Checkboxes should always be preferred. This is the most accessible solution as it provides users with a clear understanding of all the available options. It also eliminates the need for additional interactions such as opening a dropdown menu.
<ControlGroup label="Example" block> <Checkbox value="a">Option A</Checkbox> <Checkbox value="b">Option B</Checkbox> <Checkbox value="c">Option C</Checkbox> </ControlGroup>
Large list
The ComboboxMulti component can be used when there are a large number of options or vertical space is limited. It allows users to search and select options from a dropdown menu. However, this approach requires additional interaction and may not be as clear as a simple list of checkboxes.
() => { const [value, setValue] = React.useState([]); return ( <ComboboxMulti label="Select country" hint="Start typing to see results" value={value} onChange={setValue} options={COUNTRY_OPTIONS} /> ); };