How to build an accessible Tile in React

Exposes role="radio" (single) or role="checkbox" (multi) with aria-checked reflecting selection, is focusable, and toggles on Space/Enter. aria-disabled and a -1 tabindex remove disabled tiles from interaction.

When to use a Tile

• A visually rich, clickable choice card in a single- or multi-select group
• Plan/option pickers where each option needs an icon and supporting content
• A larger touch target than a plain radio or checkbox

When not to use it

• A simple inline boolean — use Checkbox or Toggle
• A dense list of text-only options — use RadioGroup or a Select

Keyboard interactions

Role radio, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: <Tile value="on">Enable</Tile> // used as a standalone on/off control

Prefer: <Tile value="on" selectable="multi">Enable</Tile> // multi allows deselect

Single (radio) tiles cannot be unselected by clicking; use multi for toggleable behavior

Example

<div role="radiogroup" aria-label="Plan">
  <Tile value="starter" selected={plan === 'starter'} onSelect={setPlan}>Starter</Tile>
  <Tile value="pro" selected={plan === 'pro'} onSelect={setPlan}>Pro</Tile>
</div>

See the full Tile reference →