Balance Logo
Reckon Design System
Open playroom

Select Menu

Select menus are contextual overlays, allowing the user to select one option from a searchable options menu.
pnpm add @balance-web/select-menu
Import usage
import {
} from '@balance-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.


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


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.

Edit 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.


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.


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.



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.


Used in conjunction with itemRenderer to achieve custom layouts.

Default is 40

Clearable value

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


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


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.


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


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


SelectMenu can be used in a paginated mode using the infinite scrolling technique.

To use pagination you must provied the following props:

  • canLoadMore — signal that more items are available
  • onLoadMore — function to load more items when user reaches the bottom of the menu and canLoadMore is true
  • loadingState — must be kept in-sync to avoid duplicate calls

NOTE: Like all handlers, onLoadMore must be memoized with React.useCallback() for performance.

Copyright © 2024 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo