Options | ELFBAR Design System

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

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

In grid layout, keep 2–3 options per row

Don’t

Don't place complex interactive elements inside each option card

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