Tile
A selectable card with radio (single) or checkbox (multi) semantics, toggled by click or keyboard
Category: inputs · WCAG 2.2-AA · inputs, tile, card, selectable, choice
Variants
- single
- multi
States
- default
- selected
- focus
- disabled
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Identifies this tile within a group. |
selected | boolean | — | Controlled selected state. |
defaultSelected | boolean | — | Initial selected state for uncontrolled use. |
onSelect | (value: string) => void | — | Called with this tile's value whenever it is toggled on (or off for multi). |
selectable | 'single' | 'multi' | single | Single = radio semantics (toggle on); multi = checkbox semantics (toggle on/off). |
disabled | boolean | — | When true, disables the control and removes it from the tab order. |
icon | React.ReactNode | — | Optional leading icon/visual. |
asChild | boolean | — | When true, renders the child element as the root via Slot, merging props (polymorphic rendering). |
children | React.ReactNode | — | Content rendered inside the component. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-accent-text--cascivo-color-bg--cascivo-color-border--cascivo-color-border-strong--cascivo-color-accent--cascivo-color-text--cascivo-color-text-muted--cascivo-radius-surface--cascivo-focus-ring
When to use
- 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
- A simple inline boolean — use Checkbox or Toggle
- A dense list of text-only options — use RadioGroup or a Select
How to build an accessible Tile in React →
Examples
Single-select group
<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>Multi-select with icon
Multi tiles toggle on and off like a checkbox.
<Tile value="notifications" selectable="multi" icon={<BellIcon />} defaultSelected>
Email notifications
</Tile>Related components
- RadioCard — RadioCard wraps a native input in a group; Tile is a standalone ARIA radio/checkbox
- CheckboxCard — Use CheckboxCard when native checkbox form semantics are required