Radio Groups
Email frequency
Best for
Single-choice settings — a titled list where exactly one row can be on
Anatomy
Dark list header · radio rows with label, sub-label, badge, description · a link action · dashed dividers · drawer footer
Email frequency
Choose how often we email you. You can change this anytime.
Plan selector
Best for
Pricing and upgrade flows — one plan at a time, with the billing period as a toggle
Anatomy
Grey header with Content Label and Grouped Toggle · plan cards with radio, badge, feature list, price · stepper footer
Choose your plan
Switch or cancel anytime
Workspace defaults
Best for
Settings with several independent single choices — people, integrations, defaults
Anatomy
Dark list header · labelled sections · Radio Button Cards with avatar or logo, label, sub-label, badge, line · dashed dividers · drawer footer
Workspace defaults
Set the primary owner and default integration.
Primary contact
Choose the person to be in contact with
Default calendar
Choose your preferred Calendar
Payment methods
Best for
Choosing a default among saved items — cards, addresses, devices
Anatomy
Grey list header · radio rows with label, Current badge, line, provider mark · dashed dividers · two full-width footer actions
Payment methods
Choose the card we charge by default.
Radio card
Best for
One option as a card — a person, an account, a destination
Anatomy
Avatar with status badges · label, sub-label, badge · description · trailing radio · 24px corners · border/strong when selected
Be first in,
and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.Radio Groups
Email frequency
Best for
Single-choice settings — a titled list where exactly one row can be on
Anatomy
Dark list header · radio rows with label, sub-label, badge, description · a link action · dashed dividers · drawer footer
Email frequency
Choose how often we email you. You can change this anytime.
Plan selector
Best for
Pricing and upgrade flows — one plan at a time, with the billing period as a toggle
Anatomy
Grey header with Content Label and Grouped Toggle · plan cards with radio, badge, feature list, price · stepper footer
Choose your plan
Switch or cancel anytime
Workspace defaults
Best for
Settings with several independent single choices — people, integrations, defaults
Anatomy
Dark list header · labelled sections · Radio Button Cards with avatar or logo, label, sub-label, badge, line · dashed dividers · drawer footer
Workspace defaults
Set the primary owner and default integration.
Primary contact
Choose the person to be in contact with
Default calendar
Choose your preferred Calendar
Payment methods
Best for
Choosing a default among saved items — cards, addresses, devices
Anatomy
Grey list header · radio rows with label, Current badge, line, provider mark · dashed dividers · two full-width footer actions
Payment methods
Choose the card we charge by default.
Radio card
Best for
One option as a card — a person, an account, a destination
Anatomy
Avatar with status badges · label, sub-label, badge · description · trailing radio · 24px corners · border/strong when selected
Be first in, and 10% off.
Join the list and we’ll email you the moment the code library and MCP server go live — with a 10% discount code to use whenever you decide to buy.
One email when it ships. No spam, and you can unsubscribe anytime.