Overview

Single Activation is a menu item whose activation implies exclusive selection within the same selection group. The visual feedback to indicate the activation state is a circular dot.

Design

Box Model

Configurations

With Left Decorator

With Secondary Label

With All

This composable uses all the visual styles from the Basic Activation [Composable], and may also include any of the following according to the use case and requirements.

Icon Color: brand-800 (#005181)
Box Height / Width: 16x16px RT
Dot Height / Width: 8x8px RT
Margin / Padding: Right 8px (dictated)

Responsive

Same as the standard menu item

States

State	Default Graphic	Default Styling
Idle		circular-dot-icon: brand-800 (#005181)
		left-icon-color: brand-800 (#005181)
		secondary-label-font: b4 font-color: brand-800 (#005181) - new variant font-style: italic - new variant
		N/A
Focus		background: brand-200 (#EBF6FF) border: 1px solid brand-500 (#1394E5)
		N/A
		N/A
		N/A
Disabled		font-color: neutral-500 (#697489) - new variant cursor: disabled circular dot icon disappears
		left-icon-color: neutral-400 (#8C93A6)
		secondary-label-font: b4 font-style: italic - new variant
		N/A
Hover		background: brand-200 (#EBF6FF)
		N/A
		N/A
		N/A
Read-only	N/A	N/A
Error	N/A	N/A

Use Cases

Original Scenario (Use Case)	Dim Sum Version (Proposed Solution with DS Components)	Scenario Description
		Single Activation Menu This is showing the Pills v2 component used with Menu Button component. These two components MUST be configured together to achieve this result. See Pills v2 Specs

Examples

Scenario Graphic	Scenario Solution	Text Resize and Reflow (200%)	Scenario Description
			Single Activation Menu menu item whose activation implies exclusive selection within the same selection group. The visual feedback to indicate the activation state is a circular dot.

Digital Accessibility

Same as the standard menu item

Variants

Not applicable

Usage Warnings

The single select menu Item shares many characteristics with the multi select item, with three key distinctions:

1. Auto-exclusive Selection within a Group:

Single select items enforce exclusive selection within a group, but multiple single selection groups can existwithin the same menu or submenu, allowing for multiple "single selections" across groups.

2. Grouping Requirement:

Single select items must always be wrapped in a group menu item, even if the group lacks a visual label, to ensure proper behavior.

3. Design Considerations:

When multiple single selection groups are present, designs must visually distinguish them. This can be done implicitly (through proximity, labels, or separators) or explicitly (with group labels or by using a submenu for each group). Submenus are recommended when too many groups exist at the same menu depth.

Reference

Not applicable