Plan Selector

The Plan Selector is how someone chooses a plan. A set of selectable options where exactly one is picked at a time. It carries price and plan detail, and leads into checkout.

Use when

Use when

• Presenting two or more plans to pick between.
• Making the selected plan unmistakable before a CTA.

Don’t use when

• Picking a single setting. Use a radio control.
• Promoting one offer. Use an Action Card.

Anatomy · Variants · Design guidelines · Tokens

To document from the Figma set. The plan option (price, detail, selected state), how selection reads at a glance, and the single CTA that follows (Action hierarchy).