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,
FilterMenu,
stateChangeTypes,
SelectMenuButton
} 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.

Alternatives

  • Dropdown — For presenting a list of discrete actions to a user

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

Allow the users to search for items within the menu. We recommend only introducing filter behaviour when the expected option count is greater than 6.

The FilterMenu shares most of the SelectMenu API, with a few additions to manage filtering -- checkout the API tab to learn more.

Async

The FilterMenu has no opinions about how you filter the options, whether it's client or server side. If you fetch options onInputChange, you must show the user that it isLoading. We recommend using debounce (or similar) to optimise performance.

Patterns

Mapping

Provide alternative properties in your options using the itemToDisabled, itemToValue, and itemToLabel utilities. Map complex objects to the required data select-menu requires while using other properties in the itemRenderer.

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 © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo