Radio group

Pick one option from a set. Selected state uses the Squad brand color.

Basic
Simple label + radio list with a disabled option.
Card group
Each option is a bordered card with a radio on the left. Border tints primary when selected.
Card group — 2-column wrap
Same card treatment, laid out in a responsive 2-column grid that collapses to a single column on narrow screens.
Card group — content-width wrap
Cards size to their contents and flow left-to-right, wrapping onto new rows as the container narrows.
Chip group
Compact grid of options; the whole chip is clickable and the radio is visually hidden.
Select shoe size
With Other input
Selecting the last option reveals an Input so the user can enter a custom value.
How did you hear about us?

Selected: social-media

Card group with Other
The last card reveals an Input for a custom answer, right inside the card.
What team are you on?

Selected: design

Chip group — large
Roomier variant with bigger padding, label + meta text.
Choose a plan
Multi-select cards
Same card pattern, but each card is a checkbox — pick any combination. The trailing plus button flips to a check when selected.
Pick the design services you need

Your selections

1 of 8
Sermon Design
Multi-select chip group
Compact pill toggles — used for tag/category pickers like the one in the repeatable group.
Plan cards
Icon-led vertical cards; the radio input is hidden and the whole card toggles selection.