Scale — Card Selector

Install

Examples

States

Resting, checked, and disabled. Slot any content — a bold title plus a muted description reads best.

Standard plan Perfect for individuals getting started.

Pro plan For growing teams that need more.

Enterprise plan Currently unavailable in your region.

Indicator type

Default type="checkbox" toggles independently; type="radio" with a shared name single-selects. Add hide-indicator for border-only selection.

Email notifications Get a digest each morning.

Border-only selected state The blue ring conveys selection; no checkbox icon.

Radio group

Share a name across type="radio" selectors to make them mutually exclusive, and wrap them in a role="radiogroup" container. Try clicking.

Starter For trying things out — free.

Growth For small teams — $29/mo.

Scale For organisations — $99/mo.

Guidelines

Usage

plan pickers, onboarding choices, or settings where each option benefits from a title, description, and a selected state. For a compact list, use a plain Radio or Checkbox instead.

Do

Use type="radio" with a shared name when only one option may be chosen.
Give each card a clear title and a short supporting line.
Keep cards in a group the same width and structure.

Don’t

Don’t reach for Card Selector when a plain Radio or Checkbox list would do.
Don’t mix radio and checkbox selectors in the same group.
Don’t rely on the border ring alone if colour is the only selection cue — keep the indicator unless space is tight.

Accessibility

Role: each card renders a <button> with role="checkbox" or role="radio" and reflects aria-checked.
Grouping: wrap radio selectors in a role="radiogroup" with an aria-label so the set is announced as one control.
Keyboard: each card is tab-focusable; Enter / Space toggles it and fires a change event.
Disabled: disabled sets aria-disabled and blocks activation.
Label: the slotted title and description form the accessible name — don’t rely on the indicator alone to convey the option.
Focus: shows the global keyboard focus ring on the card.

Properties

Radio — compact single-select for plain lists.
Checkbox — compact multi-select for plain lists.
Card — the plain, non-interactive surface.
Card Pricing — pricing tiers built on Card.

Card Selector