Maturity
Overview
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.
Properties
Name |
Values |
Default |
---|---|---|
Value Label |
String |
- |
Description |
Boolean |
False |
Type |
Single-select |
Multi-select |
Disabled |
Boolean |
False |
figureType |
Boolean |
False |
Tag |
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.
Properties
Name |
Values |
Default |
---|---|---|
Type |
Single-select |
Multiple-select |
Group heading |
Boolean |
False |
No Data |
Boolean |
False |
Action bar |
Boolean |
False |
Create 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.
Grouping
Number of items
Extra actions
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
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
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
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