OPTIONS

When to Use

Example: plan selection

  • Presenting a small set of choices (≤6) that each need a title, description, or icon for clarity
  • Selection scenarios where visual emphasis helps users compare options (e.g. plan tiers, shipping methods)
  • Single-select or multi-select card grids in forms or onboarding flows
  • For more than 6 options or simple label-only choices, use Selector or Radio instead

Usage Guidelines

DO

Use when ≤ 6 options and each needs to show a title + description. Write clear option descriptions

Don’t

Switch to Selector or Radio when more than 6 options are needed

DO

In grid layout, keep 2–3 options per row

Don’t

Don't place complex interactive elements inside each option card

Accessibility

  • Single mode: container role="radiogroup", items role="radio"
  • Multi mode: container role="group", items role="checkbox"
  • Use aria-labelledby to associate a label
  • selectionIndicator="none" hides the visible radio/checkbox chrome only; roles and keyboard behavior are unchanged