Switch Card

Toggle card control. Extends Switch into a clickable panel with label, description, and optional icon.

Cloud sync

Enable automatic backups to the cloud

<SwitchCard className="max-w-sm" defaultChecked>  <SwitchCardContent>    <SwitchCardLabel>Cloud sync</SwitchCardLabel>    <SwitchCardDescription>      Enable automatic backups to the cloud    </SwitchCardDescription>  </SwitchCardContent>  <SwitchCardIndicator /></SwitchCard>

Usage

import {
  SwitchCard,
  SwitchCardContent,
  SwitchCardDescription,
  SwitchCardIndicator,
  SwitchCardLabel,
} from "@reva/ui";

SwitchCard is standalone — no group wrapper needed. Each card manages its own toggle state via checked / defaultChecked / onCheckedChange.

Composition

Use the following composition to build a SwitchCard :

SwitchCard
  SwitchCardIcon
  SwitchCardContent
    SwitchCardLabel
    SwitchCardDescription
  SwitchCardIndicator

Examples

With icons

CSS support

Enable autocomplete and syntax highlight for CSS files

Cloud sync

Enable automatic backups to the cloud

Excel export

Allow users to export data to Excel files locally

<VStack className="max-w-sm">  <SwitchCard defaultChecked>    <SwitchCardContent>      <SwitchCardIcon>        <FileCode />      </SwitchCardIcon>      <SwitchCardLabel>CSS support</SwitchCardLabel>      <SwitchCardDescription>        Enable autocomplete and syntax highlight for CSS files      </SwitchCardDescription>    </SwitchCardContent>    <SwitchCardIndicator />  </SwitchCard>  <SwitchCard>    <SwitchCardContent>      <SwitchCardIcon>        <CloudArrowUp />      </SwitchCardIcon>      <SwitchCardLabel>Cloud sync</SwitchCardLabel>      <SwitchCardDescription>        Enable automatic backups to the cloud      </SwitchCardDescription>    </SwitchCardContent>    <SwitchCardIndicator />  </SwitchCard>  <SwitchCard defaultChecked>    <SwitchCardContent>      <SwitchCardIcon>        <File />      </SwitchCardIcon>      <SwitchCardLabel>Excel export</SwitchCardLabel>      <SwitchCardDescription>        Allow users to export data to Excel files locally      </SwitchCardDescription>    </SwitchCardContent>    <SwitchCardIndicator />  </SwitchCard></VStack>

Disabled

Disabled toggleCannot be changed

<SwitchCard className="max-w-sm" disabled>  <SwitchCardContent>    <SwitchCardLabel>Disabled toggle</SwitchCardLabel>    <SwitchCardDescription>Cannot be changed</SwitchCardDescription>  </SwitchCardContent>  <SwitchCardIndicator /></SwitchCard>

Props

SwitchCard

Forwards to Radix Switch.Root. See Radix UI Switch.

Prop	Type	Default	Description
`checked` / `defaultChecked`	`boolean`	—	Controlled vs uncontrolled toggle state.
`onCheckedChange`	`(checked: boolean) => void`	—	Called when toggle state changes.
`disabled`	`boolean`	—	Disables the card.
`name` / `value`	`string`	—	For form submission.