Agriculture Design System
Design System for the Export Service

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.

Open in Playroom, opens in a new tab
<ControlGroup label="Example" block>
	<Checkbox value="a">Option A</Checkbox>
	<Checkbox value="b">Option B</Checkbox>
	<Checkbox value="c">Option C</Checkbox>

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 (
			label="Select country"
			hint="Start typing to see results"
  • Checkbox Checkboxes allow users to select one or more options from a list.
  • Combobox This component allows users to select from a list of options. It’s especially useful when there are many options to choose from.