Options

Anatomy

1. Option Card — Contains icon, title, and description
2. Selection Indicator — Circular/checkmark icon in the top-left, indicating selected state
3. Container — Supports grid and list layouts

Usage Guidelines

Do ✓

• Use when ≤ 6 options and each needs to show a title + description
• In grid layout, keep 2–3 options per row
• Write clear option descriptions to help users make informed choices

Don't ✗

• Switch to Selector or Radio when more than 6 options are needed
• 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