ToggleCard

A large, selectable card with an icon, title, and description. Multi-select via ToggleCardGroup, or standalone as a single on/off card.

Installation

pnpm add @wandercom/design-system-web

Usage

26 lines
import {
  ToggleCard,
  ToggleCardGroup,
} from '@wandercom/design-system-web/ui/toggle-card';
import { useState } from 'react';

export default function ToggleCardExample() {
  const [value, setValue] = useState<string[]>([]);

  return (
    <ToggleCardGroup value={value} onChange={setValue}>
      <ToggleCard
        value="ICONIC"
        icon={<IconCrown />}
        title="Iconic"
        description="Exceptional properties unlike any other"
      />
      <ToggleCard
        value="PREMIER"
        icon={<IconDiamond />}
        title="Premier"
        description="Top-rated stays with premium amenities"
      />
    </ToggleCardGroup>
  );
}

Examples

Loading example...

Multi-select group

ToggleCardGroup is checkbox-style: it holds an array of selected values, so the user can select any number of cards — including just one. Each card only needs a unique value; selection state flows through the group.

5 lines
<ToggleCardGroup value={value} onChange={setValue}>
  <ToggleCard value="ICONIC" icon={<IconCrown />} title="Iconic" description="Exceptional properties unlike any other" />
  <ToggleCard value="PREMIER" icon={<IconDiamond />} title="Premier" description="Top-rated stays with premium amenities" />
  <ToggleCard value="FAVORITE" icon={<IconStar />} title="Favorite" description="Highly rated by recent guests" />
</ToggleCardGroup>

Standalone

Use a ToggleCard on its own for a single on/off card. Control it with pressed / onPressedChange (or defaultPressed for uncontrolled use).

7 lines
<ToggleCard
  pressed={enabled}
  onPressedChange={setEnabled}
  icon={<IconBell />}
  title="Notifications"
  description="Get updates about new properties"
/>

Disabled

1 lines
<ToggleCard disabled icon={<IconStar />} title="Unavailable" description="This option is currently unavailable" />

Without icon

1 lines
<ToggleCard title="Flexible layout" description="A simple card layout without leading artwork" />

Without icon and no description

1 lines
<ToggleCard title="Title only" />

Icon sizing

The icon is a ReactNode rendered shrink-0; the caller controls its size. Cards typically use 20px or 24px icons.

1 lines
<ToggleCard value="ICONIC" icon={<IconCrown className="size-6" />} title="Iconic" />

Props

ToggleCardGroupProps

value:

string[]
The currently selected card values.

onChange:

(value: string[]) => void
Callback fired with the next array of selected values.

children:

ReactNode
ToggleCard children.

className?:

string
Additional CSS classes for the group container.

The group also accepts the standard div attributes (e.g. id, aria-label).

ToggleCardProps

Extends the Radix Toggle root props (e.g. pressed, defaultPressed, onPressedChange, disabled).

value?:

string
Unique value identifying this card within a ToggleCardGroup. Required inside a group; ignored when standalone.

icon?:

ReactNode
Leading icon. Rendered shrink-0; the caller controls its size.

title:

ReactNode
Card title (rendered as Text body-lg / medium).

description?:

ReactNode
Secondary description text (rendered as Text body / secondary).

pressed?:

boolean
Controlled pressed state for standalone use.

onPressedChange?:

(pressed: boolean) => void
Pressed-change callback for standalone use.

disabled?:

boolean
Disables interaction.

className?:

string
Additional CSS classes for the card root.

classNames?:

{ icon?, body?, title?, description? }
Granular CSS class overrides for internal elements.

Accessibility

ToggleCard is built on the Radix Toggle primitive, so each card is a button that exposes aria-pressed (checkbox-style toggle semantics) — whether standalone or inside a group.

Keyboard interaction:

  • Tab - Move focus to the next card
  • Space / Enter - Toggle the focused card

ToggleCardGroup wraps its cards in a container with role="group". Provide an accessible name with aria-label or aria-labelledby when the group needs one.

ToggleCard