Radio.Group
A row that pairs a Radio control with a two-line label block, combining a primary title and an optional secondary subtitle. The Radio slot is swappable via the Root SLOT property, and the content area stacks Label.Title above Label.Subtitle in a vertical container.
Overview
A row that pairs a Radio control with a two-line label block, combining a primary title and an optional secondary subtitle. The Radio slot is swappable via the Root SLOT property, and the content area stacks Label.Title above Label.Subtitle in a vertical container.
Anatomy
- 1Root required Horizontal auto-layout row. 4pt vertical padding, 12pt gap between radio and content. Full-width (375pt reference).
- 2Radio required 24pt-wide Radio instance (40pt tall hit target). Swappable via the Root SLOT property. Defaults to isSelected=false, isDisabled=false.
- 3Container.Content required Vertical stack holding the two label lines. Fills remaining width.
- 4Label.Title required Primary label text. color.content.primary. 17pt regular, 22pt line-height.
- 5Label.Subtitle optional Secondary descriptive text. color.content.secondary. 14pt regular, 18pt line-height.
Measurements
Specs
Values resolved live from the token spine. Token names follow the active platform; each links to its page.
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.
Accessibility
Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.