Choice Menu

Displays a list of single or multi-select choices when triggered by a control

Cover

Overview

Maturity

-

FYQ2 target

-

Figma component

-

Repository

-

Storybook

-

The Choice Menu Control displays a customizable list of single or multi-select items. Each Choice Menu Item signifies a unique value, enhanced by descriptions or visuals. This control, never used in isolation, allows topic-based grouping, footer actions, and user created values. Its integral to Select and Combobox controls.


Anatomy

Choice Menu Item Control

The Choice Menu Item control represents a unique value inside a Choice menu. Consists primarily of a Value label, which can be augmented by other elements such as descriptions, images, or iconography. Additionally, it provides signifiers that reinforce the selection and affordances to understand how it works.

Anatomy of a Menu Choice Item Control

Anatomy of a Menu Choice Item Control

1. Checkbox Control
2. Icon figure
3. Value Label
4. Description
5. Avatar
6. Initials
7. Badge
8. Tag
9. Selected signifier

Properties

Name

Values

Default

Value Label
Provides meaning to the control

String

-

Description
Provides additional meaning to the Value Label

Boolean

False

Type
Controls if the multiple or single selection is available

Single-select

Multi-select

Disabled
Disables interaction and focus and signifies it

Boolean

False

figureType
Displays additional decoration elements

Boolean

False

Tag
Displays a tag replacing the value label

Boolean

False


Choices Menu Control

A Choice Menu Control is composed of multiple Choice Menu Item Controls. It also holds the possibility to add actions at the footer and group items by topic.

Anatomy of a Menu Choice Control

Anatomy of a Menu Choice Control

1. Group Heading
2. User tag
3. Menu Choice
4. Add Action
5. Settings Action

Properties

Name

Values

Default

Type
Controls if the multiple or single selection is available

Single-select

Multiple-select

Group heading
Controls if the Menu Choice Items display grouped

Boolean

False

No Data
Controls if there are not Menu choice Items to display

Boolean

False

Action bar
Controls if the bar for actions is displayed

Boolean

False

Create Item
Displays an action that allows to create an item

Boolean

False

How to use

Selection types

The Choice Menu offers the option to select either single or multiple Choice Menu Items. When multiple-choice is displayed, a Checkbox control affordance is presented, while a single-selection displays an Icon check signifier.

✅ Single-select for choosing one item at a time

✅ Single-select for choosing one item at a time

Users can select only one item with this option, and the Choice Menu will dismiss automatically after selection.

✅ Multiselect for selecting multiple items

✅ Multiselect for selecting multiple items

Users can select multiple items with this option, and the Choice Menu will remain displayed until dismissed.

Grouping

⛔️ Avoid mutually exclusive groups

⛔️ Avoid mutually exclusive groups

Avoid using grouping to exhibit independent groups of choice menu items.

✅ Use grouping for organizing large amounts of items

✅ Use grouping for organizing large amounts of items

Grouping items by topic is an effective way to organize lengthy lists and help users find information more easily.

✅ Use heading labels that are short and represent the topic

✅ Use heading labels that are short and represent the topic

Number of items

⚠️ Consider avoiding short item lists

⚠️ Consider avoiding short item lists

Using the Choices control instead for displaying brief lists may be worth considering in this situations

✅ Efficiently present extensive lists

✅ Efficiently present extensive lists

Opt for the Choice Menu to effectively display lists with more than 10 items.

Extra actions

✅ Use ActionBar property for adding actions

✅ Use ActionBar property for adding actions

Enable to include customizable actions in external flows.

✅ Use CreateItem property for adding custom items to the menu

✅ Use CreateItem property for adding custom items to the menu

In controls like Combobobox where users can input text, users will be able to create custom items in the menu.

 

Behavior

Choice Item Control States

The state of a component can depend on properties set before people can interact with it. We call them state properties. Differentiating them from the user-triggered states allows us to combine them, creating richer states that cover the whole interaction spectrum.

Related content

Default variants

Default - item

Disabled

Disabled

When the property Disabled is true, users can't interact with the control. A Disabled control cannot be focused or hovered.

The Text Input Control has a 120px min-width. If the value added on the control exceeds the width size, it truncates, and never breaks into lines.

Sizing and Spacing

 

We use standard sizing and spacing for all interactive controls to improve the experience depending on the information density and make our interface more accessible, predictable, and easy to use.

 

Related content

 

Width

Width

If the trigger control is smaller than 200px, the Choice Menu Control is specifically designed to have a minimum width of 200px, ensuring that all the content within the menu is easily accessible to users. For dense lists, we recommend widths between 320px and 360px . In the event that the trigger control exceeds 200px in width, the Choice Menu Control will adjust its own width to match that of the trigger, with no upper limit imposed on its size.

If the text assigned to a value label exceeds the available width, the label will be broken up into multiple lines in order to properly display all of its contents.

Height

Height

Height

The Choice Menu Control has a maximum height of 356px and expands as items are added until it reaches this limit.


Quality checklist

This component passes the Beta quality checklist described in our Component lifecycle.

Maturity

-