Selecting an option from a list
The type of list component to use is determined by the task, the experience level of the user, and the number of items in the list. Selecting the appropriate input type helps users make choices more easily and accessibly.
Small lists
Use a Control group with a list of Checkboxes or Radio buttons when there are 8 or fewer options.
Users can make choices faster when they can see the full list and not have to a dropdown or scroll to find options.
<ControlGroup hideOptionalLabel label="Fruits" hint="Hint text" block> <Checkbox value="apple">Apple</Checkbox> <Checkbox value="banana">Banana</Checkbox> <Checkbox value="mango">Mango</Checkbox> <Checkbox value="peach">Peach</Checkbox> </ControlGroup>
Lists with more than 8 items
Use a Select menu or Combobox with a list of 8 items or more. The task and complexity of the list will determine which option is most suitable.
A select menu works best when users can see all options without excessive scrolling. A key benefit of using a select is that mobile devices handle them natively. This provides familiar, accessible and space-efficient controls.
Use a combobox for longer lists where searching or filtering items will help users find the options they want.
Combobox is an efficient tool for power users, but less experienced users may still scroll to find and select an option. They are often not aware that they can use the input to type and filter.
<Combobox hint="Start typing to see results" label="Food served" onChange={console.log} options={[ { value: 'asian noodle bowls', label: 'Asian noodle bowls' }, { value: 'banh mi sandwiches', label: 'Banh mi sandwiches' }, { value: 'bbq ribs', label: 'BBQ ribs' }, { value: 'burgers', label: 'Burgers' }, { value: 'cake', label: 'Cake' }, { value: 'coffee', label: 'Coffee' }, { value: 'cookies', label: 'Cookies' }, { value: 'falafel pitas', label: 'Falafel pitas' }, { value: 'fish and chips', label: 'Fish and chips' }, { value: 'fried chicken', label: 'Fried chicken' }, { value: 'fries', label: 'Fries' }, { value: 'grilled cheese sandwiches', label: 'Grilled cheese sandwiches' }, { value: 'ice cream', label: 'Ice cream' }, { value: 'mexican', label: 'Mexican' }, { value: 'pasta', label: 'Pasta' }, { value: 'pulled pork', label: 'Pulled pork' }, { value: 'soft drinks', label: 'Soft drinks' }, { value: 'veggie wraps', label: 'Veggie wraps' }, ]} />
Picking an option that is not listed
Picking an option that is not available in a small list
If users need to enter a value that isn’t in the list, include an ‘Other’ option at the end of the group. When they select it, conditionally review a text field so they can input their own answer.
If users need to give more than one custom answer, include an ‘Add another’ button below the conditionally revealed input. This lets them add more fields as needed. Each new input should have a unique, descriptive label to ensure they’re accessible and identifiable – for example, ‘Other option 2’. This pattern should only be used with Checkbox groups, not radio buttons.
Limit the number of additional fields where possible to avoid overwhelming the form.
<FormStack> <ControlGroup hideOptionalLabel label="Fruits" hint="Hint text" block> <Checkbox value="apple">Apple</Checkbox> <Checkbox value="banana">Banana</Checkbox> <Checkbox value="mango">Mango</Checkbox> <Checkbox value="peach">Peach</Checkbox> <Checkbox checked value="other"> Other </Checkbox> </ControlGroup> <ConditionalFieldContainer visible> <TextInput label="Other fruit" required value="Plum" /> <Button alignSelf="start" iconBefore={PlusIcon} variant="text"> Add another fruit </Button> </ConditionalFieldContainer> </FormStack>
Picking an option that is not available in a list with more than 8 items
To add another option to a large list, compose a pattern of Select or Combobox with an ‘Other’ option. When ‘Other’ is selected:
- the field will show ‘Other’ as the selected value
- a secondary text input will be conditionally revealed below the select/combobox
- focus will be immediately moved to the newly revealed input field.
<FormStack> <Combobox hint="Start typing to see results" label="Food served" onChange={console.log} options={[ { value: 'asian noodle bowls', label: 'Asian noodle bowls' }, { value: 'banh mi sandwiches', label: 'Banh mi sandwiches' }, { value: 'bbq ribs', label: 'BBQ ribs' }, { value: 'burgers', label: 'Burgers' }, { value: 'cake', label: 'Cake' }, { value: 'coffee', label: 'Coffee' }, { value: 'cookies', label: 'Cookies' }, { value: 'falafel pitas', label: 'Falafel pitas' }, { value: 'fish and chips', label: 'Fish and chips' }, { value: 'fried chicken', label: 'Fried chicken' }, { value: 'fries', label: 'Fries' }, { value: 'grilled cheese sandwiches', label: 'Grilled cheese sandwiches', }, { value: 'ice cream', label: 'Ice cream' }, { value: 'mexican', label: 'Mexican' }, { value: 'pasta', label: 'Pasta' }, { value: 'pulled pork', label: 'Pulled pork' }, { value: 'soft drinks', label: 'Soft drinks' }, { value: 'veggie wraps', label: 'Veggie wraps' }, { value: 'other', label: 'Other' }, ]} value={{ value: 'other', label: 'Other' }} /> <ConditionalFieldContainer visible> <TextInput hint="Add another type of food served that was not previously listed" label="Other food served" required value="Pizza" /> </ConditionalFieldContainer> </FormStack>
Related components
- 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.
- Conditional field container – A standardised pattern for conditionally hiding and revealing the amount of content a user views in a form.
- Radio – Radios allow users to select one option from a list.
- Select – Select provides a way for users to choose one item from a drop down list. It helps reduce input errors and screen space.
- Text input – This component allows users to enter free-form text.