OptionCard

Selectable tiles with a preview, for choices people judge by eye: themes, fonts, animations. One choice makes a radio group, selectionMode="multiple" a checkbox group.

OptionCard
OptionCardGroup

UsageLink to the section Usage

tsx

import { OptionCard, OptionCardGroup } from '@skribly/ui/surfaces'

tsx

<OptionCardGroup label="Theme" value={theme} onChange={setTheme}>
  <OptionCard value="light" label="Light" preview={<ThemeSwatch />} selectedLabel="Selected" />
  <OptionCard value="dark" label="Dark" preview={<ThemeSwatch />} selectedLabel="Selected" />
</OptionCardGroup>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

Built on React Aria radio and checkbox groups: Tab enters the group, arrow keys move, Space selects, and disabled tiles are skipped.
The label names the group and each tile is named by its label and described by its description; previews are hidden.
The chosen tile gets a check mark, an accent border and the selectedLabel word, and Highlight in Windows high contrast.
Errors show under the grid and are linked to the group.

This demo runs through axe in all three themes on every test run. See what the tests check.