Form

Radio

View in Figma

Circular control that shows an empty ring when unselected and an accent ring with a filled accent dot when selected, dimming the whole control when disabled.

Overview

Circular control that shows an empty ring when unselected and an accent ring with a filled accent dot when selected, dimming the whole control when disabled.

Variant
Unselected

The unselected variant.

Variants and states

enableddisabled
unselected
selected

Anatomy

Radio
Radio label
  1. 1Container  required  24pt hit target that centers the visual ring.
  2. 2Ring  required  20pt circular ring with a 2pt stroke. Neutral stroke when unselected, accent stroke when selected.
  3. 3Dot  optional  10pt accent dot shown only in the selected state.
  4. 4Label  optional  Optional trailing text. Not part of the Figma component, added by the consumer alongside the ring.

Measurements

Radio label
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Ring
Ring stroke width
strokeXl
2pt
Ring stroke color, unselected
colorBorderSecondary
#D3D5D8
Ring stroke color, selected
colorBorderFocused
#4B56C7
Dot
Dot fill, selected
colorContentAccent
#4B56C7
Label
Gap from ring to label
spacingGapPositiveXl
12pt
Label typography
body.md.regular
Size 17px · typographyFontSizeBodyMdLine height 22px · typographyLineHeightBodyMdWeight 400 · typographyFontWeightRegularTracking -0.41px · typographyTrackingBodyMdParagraph spacing 0px · typographyParagraphSpacingBodyMdFamily SF Pro Text · typographyFontFamilyText
Label color
colorContentPrimary
#0C1828

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
isSelectedvariantfalse, true
isDisabledvariantfalse, true

Accessibility

Group related radios so assistive technology announces the count, keep each tap target at least 44 by 44pt around the 20pt ring, and expose the selected state. Never rely on color alone.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.