Balance Logo
Balance
Reckon Design System

Select Menu

Select menus are contextual overlays, allowing the user to select one option from a searchable options menu.
Install
pnpm add @reckon-web/select-menu
Import usage
import {
SelectMenu
} from '@reckon-web/select-menu';
  • Code
  • API

The SelectMenu shares most of its behaviour, appearance and API with the DropdownMenu. Rather than accepting children you must provide options as an array, an onChange handler and a value.

Standard

Single select

The single select is used for setting enumerable values when filtering data. It is not to be used in forms, where an actual input element is required; prefer the SelectField.

Open in Playroom

Multi select

The SelectMenu is unopinionated in how many items are selected in the list, or how you manage selected options. Pass an array to the value prop to select more items.

Disabled option

You may disable options where appropriate.

Filterable

Apply the isFilterable property to allow the user to search for items within the menu. We recommend only introducing filter behaviour when the expected option count is greater than 6.

Default options

Use defaultOptions to pin options to the top of the menu. This can help users find common options.

Patterns

Item renderer

You can provide an alternate item renderer.

Clearable value

Provide onClear in addition to the onChange handler to let the user clear all the values with one click.

Labelling

There's a few strategies for displaying the value within the button.

Verbose

The most user friendly approach is to display as much information as possible to the user within your space constraints. In the example below we show up to 2 values, then when there's more than two we show the first selected value and the remaining count.

Highlight

You may want to highlight the selected value through font-weight and/or colour.

Indicator

When horizontal space is at a premium you may want to display the count in a notification badge.

Copyright © 2021 Reckon. Designed and developed in partnership with Thinkmill.