SelectionIndicator
An internal, presentational selection mark shared by public Checkbox, Radio, RadioGroup and list selection rows. It is not a package-root export and must not be used as an interactive control.
Implementation previewEvery example. In one place.
Explore every named example, including states, compositions, and theme variants.
Example source
packages/design-system/src/components/primitives/SelectionIndicator/SelectionIndicator.stories.tsxExport PlaygroundImplementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.
Stories + source JSON ↗Local specification source status: preview. Implementation preview pending sign-off.
An internal, presentational selection mark shared by public Checkbox, Radio, RadioGroup and list selection rows. It is not a package-root export and must not be used as an interactive control.
Implementation API 1 entry point · source-derived preview
Read the actual callable API and preserve its composition constraints. Each union branch is a complete alternative; props marked forbidden cannot be supplied.
Internal implementation helper. This is not a package-root export. Use its public parent controls.
SelectionIndicatorSelectionIndicatorProps
packages/design-system/src/components/primitives/SelectionIndicator/SelectionIndicator.tsx:27
| Prop | Type | Presence | Notes |
|---|---|---|---|
selected | boolean | Required | Fills the chip (`--cds-bg-bold`) and reveals the glyph; unset shows the empty grey chip. |
glyph | SelectionGlyph | Required | Glyph shown when selected — `check` for checkboxes, `dot` for radios. |
disabled | boolean | undefined | Optional | Dims the chip to the disabled treatment; the wrapper still owns blocking interaction. |
className | string | undefined | Optional | Class hook for the wrapping control to compose focus/layout styling. |
Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source.
Overview
The shared DS 4.5 selection chip — the round check/dot mark that Checkbox, Radio, and
RadioGroup render. Presentational only (aria-hidden); it owns no interaction.
When to use
Effectively never from app code — this is a DS-internal building block and is not exported from
the package root. Reach for Checkbox (a check glyph) or Radio / RadioGroup (a dot), which
wrap this chip with the correct role, keyboard, and accessibility semantics. It lives here only so
the three controls share one visual source of truth; render it directly only when authoring a new
selection primitive inside the design system itself.
Component specification
$schema
../../../specs/component-spec.schema.jsonParts
- Id
- chip
- Label
- Circular container
- Description
- Hosts the selected or unselected fill.
- Required
- true
- Id
- glyph
- Label
- Selection mark
- Description
- Check icon for multiple choice or a small filled dot for single choice; absent when unselected.
- Required
- false
Allowed Design Choices
- Variants
- Check
- Label
- Check
- Description
- Multiple-choice visual.
- Dot
- Label
- Dot
- Description
- Single-choice visual.
- Sizes
Variants
- Id
- check
- Label
- Check
- Description
- selected=true renders a 24px check icon with stroke width 2.
- Platforms
- web
- Id
- dot
- Label
- Dot
- Description
- selected=true renders an 8px filled circle.
- Platforms
- web
Sizes
None specifiedMeasurements
- Id
- default-diameter
- Label
- Default chip diameter
- Kind
- exact
- Token
- --cds-size-32
- Value
- 32
- Unit
- px
- Applies To
- chip
- Notes
- A private --selection-indicator-size hook lets owning controls replace an existing visual footprint; this is not a public size prop.
- Id
- dot-diameter
- Label
- Selected dot diameter
- Kind
- exact
- Token
- --cds-size-8
- Value
- 8
- Unit
- px
- Applies To
- glyph
- Id
- radius
- Label
- Circular shape
- Kind
- exact
- Token
- --cds-radius-full
- Value
- 9999
- Unit
- px
- Applies To
- chip
- Notes
- The radius token keeps the chip circular at its host-controlled size.
Layout
- Alignment
- The mark is centered inside the nonshrinking circular chip.
- Flow
- One container and at most one visible mark.
- Notes
- Owning controls determine hit area, layout, focus and input semantics. The 32px visual is not a claim about the interactive target size.
Typography And Color
- Typography
- None specified
- Colors
- Label
- Unselected container
- Description
- Theme-specific empty selection fill.
- Token
- --cds-selection-off-container
- Label
- Selected container
- Description
- Bold selection fill.
- Token
- --cds-bg-bold
- Label
- Selected mark
- Description
- Check or dot foreground.
- Token
- --cds-text-on-bold
States
- Id
- unselected
- Label
- Unselected
- Description
- Empty circular container; no check or dot is rendered.
- Id
- selected
- Label
- Selected
- Description
- Bold container and the requested check or dot.
- Id
- disabled
- Label
- Disabled
- Description
- Applies disabled opacity to either selected state. It does not block events because this helper owns no interaction.
Behavior
- Label
- Pure visual state
- Description
- selected and glyph are required. The helper has no event callbacks and keeps no selection state.
- Label
- Internal composition only
- Description
- Public consumers should use Checkbox, Radio, RadioGroup or List.Item.Selection. Owning components may supply the private size hook and className.
Accessibility
- Label
- Hidden decoration
- Description
- The outer span is always aria-hidden=true. It provides no role, accessible name, focus stop or keyboard handling.
- Label
- Owner responsibilities
- Description
- The public control must expose its checked and disabled states, accessible name, focus indicator and input behavior. Do not put this helper alone in a user flow.
Content Adaptation
- Label
- No text content
- Description
- This helper does not render a label. Label and explanatory copy belong to its owning control.
Motion Haptics
- Motion
- Label
- Current transition
- Description
- The local stylesheet transitions background over a literal 0.15s with ease. It has no helper-level reduced-motion override; include this in motion review rather than claiming complete reduced-motion parity.
- Haptics
- Label
- None
- Description
- The visual helper requests no haptic feedback. Owning controls may do so on valid input.
Platform Differences
- Platforms
- ios
- android
- Description
- Native implementations and platform parity are not verified. Vue also has no local implementation.
- Rationale
- This preview was authored from the local React types, implementation, styles and documentation. Native unit, typography, interaction and accessibility mappings require platform review.