Selectable Preview Option

Radio/checkbox option with a preview tile — used for theme and booker layout pickers.

import { SelectablePreviewOption } from "@coss/ui/shared/selectable-preview-option";

Example

Composition matches the dashboard theme picker in Appearance (Field + Fieldset, RadioGroup, FieldItem, SelectablePreviewOption with the same preview SVGs).

apps/web · appearance · dashboard theme

System default

Light

Dark

Call sites

File	Notes
`apps/web/modules/settings/my-account/appearance-view.tsx`	Theme picker
`apps/web/modules/settings/components/BookerLayoutSelector.tsx`	Booker layouts

Example URLs

Not exhaustive — a few places you can open locally (e.g. http://localhost:3000) to see this in product.

Path	Notes
`/settings/my-account/appearance`	Theme / booker layout preview options

Source

packages/coss-ui/src/shared/selectable-preview-option.tsx

On This Page

Example Call sites Example URLs Source