FixNeeds Refinement
Segmented Control - Group Component link

A labeled Toggle Segmented Control with optional subtext and a small-avatar group below.

Collapse subtext/avatars booleans + adopt named slots
Four variants on a subtext × avatars boolean matrix is a slot pattern in disguise — they describe whether content is present, not different visual treatments. Replace with named optional slots (subtext?: String, avatars?: [Avatar]) so the variant count drops to 1 and consumers can compose any future trailing content (a count badge, an inline error) without a new variant.
In Context

Used in form sections where a binary choice carries supporting metadata — e.g. a "Send to / Request from" picker with the most-recent recipients shown below, or a "Schedule / Now" toggle with a helper subtext explaining the consequence.

Label Option 1 Option 2 Use this space for your subtext. DM LM LM
Live Preview
Properties
Selected
Subtext
Avatars
DS Health
Reusable
Warn
Four variants for what should be a single component with two optional slots. Any future trailing content (a count badge, an error message, a help link) requires a new variant.
Self-contained
Partial
Composes Toggle - Segmented Control + Subtext Message + Avatar instances. Inherits all 3 sub-components' open issues.
Consistent
Partial
Naming uses positional booleans (subtext=yes|no, avatars=yes|no) instead of slot semantics. Should be subtext?: String + avatars?: [Avatar].
Composable
Partial
Built from sub-components but doesn't expose them as slots — consumers can't swap the inner control for a 3-segment variant or use a custom subtext component.
Open Issues
  • Boolean variant matrix instead of named slots. subtext × avatars produces 4 variants for a slot-presence question. Replace with named optional slots — Figma Slot architecture supports this directly. C1 · Layer Structure & Naming
  • Inherits all Toggle - Segmented Control issues. No Pressed / Focused / Disabled state, hardcoded 2-segment count, positional first|second naming — all flagged on the parent component and propagate here. C5 · Interaction State Coverage
  • No way to change avatar count. Avatar group is baked with exactly 3 avatars. Real consumers may want 1, 2, 5+. Should be a slot accepting avatars: [Avatar]. C4 · Native Mappability
  • Code Connect mappings not registered. Blocked on the slot restructure — one mapping with optional subtext + avatars params will be cleaner than 4 variant entries. C7 · Code Connect Linkability
Design Recommendations
  • Convert boolean axes to named slots. Target API: EBSegmentedControlGroup(label, segments, selectedIndex, subtext?, avatars?). subtext and avatars become optional content slots driven by data, not variants. Drops Figma variant count from 4 to 1. Slot
  • Adopt Figma Slot for both subtext and avatars. Use Figma's native Slot feature so consumers can instance-swap any Subtext Message variant or any Avatar group composition without detaching. Slot
  • Promote inner control to a data-driven Segmented Control. Tracked on the Toggle - Segmented Control component — once that ships segments: [Segment], this group inherits the flexibility automatically. Family
  • Document the A11y model for the labeled group. Use aria-labelledby referencing the label. Subtext gets aria-describedby. Avatars below should be a separate accessible region with their own labels. A11y
Types
Default
DES DEV

366 wide labeled group. Label on top, 40px-tall Toggle Segmented Control below, then optional subtext and avatar-group rows. Heights: 64 (base) / 86 (+ subtext) / 104 (+ avatars) / 118 (both).

Properties
Selected
Subtext
Avatars
Properties
Selected First
Subtext Hide
Avatars Hide
Colors
Label #0A2757
Subtext #6780A9
Selected bg #005CE5
Unselected label #005CE5
Layout
Width 366
Label height 16
Label → control gap 8
Control height 40
Control → subtext gap 8
Subtext height 22
Control → avatars gap 8
Avatar group 32 tall
Typography
Label Proxima Soft Semibold · 16 / 16 · +0.25
Subtext See Subtext Message component
Segment See Toggle - Segmented Control
Colors

Group-owned tokens are limited to the label color; everything else (segments, subtext, avatars) inherits from its sub-component.

Role Token Default
Label segmented-control-group/color/label #0A2757
Selected bg toggle-segmented-control/color/selected/bg #005CE5
Unselected label toggle-segmented-control/color/unselected/label #005CE5
Subtext subtext-message/color/default/text #6780A9
Property Mapping

Subtext and Avatars become optional content slots after restructure. The 4-variant boolean matrix collapses to a single component definition.

Figma PropertySwiftUICompose
subtext=yes/no subtext: String? subtext: String?
avatars=yes/no avatars: [Avatar]? avatars: List?
segments segments: [Segment] segments: List
selected=first/second selectedIndex: Int selectedIndex: Int
#label label: String label: String
SwiftUI
ios/Components/SegmentedControl/EBSegmentedControlGroup.swift
Jetpack Compose
android/components/segmentedcontrol/EBSegmentedControlGroup.kt
Accessibility
RequirementiOSAndroid
Label association Use .accessibilityLabelledBy on the segmented row referencing the label text. Use Modifier.semantics { contentDescription = label } on the group container.
Subtext announce Wire as .accessibilityHint on the segmented row so VoiceOver reads "Label, hint: Use this space for your subtext." Use stateDescription on the row.
Avatar group Separate accessibility region; each avatar exposes its own label ("Dela Cruz, recently selected"). Same — each avatar gets its own contentDescription.
Criteria Scorecard
ID Criterion Status Notes
C1 Layer Structure & Naming Needs Refinement Boolean axes for slot presence. Convert to named optional slots.
C2 Variant & Property Naming Needs Refinement subtext=yes|no and avatars=yes|no describe slot presence, not visual variants.
C3 Token Coverage Ready Label color uses main/text/default. All other colors inherit from sub-components.
C4 Native Mappability Needs Refinement Maps to a single composable / SwiftUI view with optional slots after restructure.
C5 Interaction State Coverage Requires Rework Inherits Toggle - Segmented Control's missing states.
C6 Asset & Icon Quality Not Applicable No assets owned by this component.
C7 Code Connect Linkability Not Mapped Blocked on slot restructure.
Variants Inventory (4 total)

subtext × avatars boolean matrix. Each combination produces a height variant: 64 / 86 / 104 / 118.

#subtextavatarsSizeNode
1nono366 × 6427:30941
2noyes366 × 10427:30946
3yesno366 × 8627:30957
4yesyes366 × 11827:30964
1.0.0 — 2026-05-19Major
Initial Assessment · node 27:30940
Component assessed — 4 variants on subtext × avatars. Composes Toggle - Segmented Control + Subtext Message + Avatar. Documented
Initial
Verdict: Fix — Replace boolean axes with named optional slots (subtext?, avatars?). Drops variant count from 4 to 1 and unlocks any future trailing content. Open
Family
C1 — Boolean axes — Slot-presence as variants. Convert to Figma Slot. Open
C1
C5 — Inherited state gaps — Toggle - Segmented Control is missing Pressed / Focused / Disabled; this group inherits all of those. Open
C5
C7 — Code Connect — Not registered. Blocked on slot restructure. Open
C7