ToggleCard

Card-style toggle switch with label and description.

Also known as: switch card, toggle setting card, option toggle card

View in Storybook

When to use

• Rich toggle settings with label and description (notification preferences, feature flags). For simple toggles, use Toggle.
• For card-style checkboxes, use CheckboxCard.

Import

import { ToggleCard } from '@vacano/ui'

Usage

const [enabled, setEnabled] = useState(false)

<ToggleCard
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
  label="Email Notifications"
  description="Receive updates about your account"
/>

With Description

<ToggleCard
  checked={true}
  onChange={() => {}}
  label="Premium Plan"
  description="Access to all features and priority support"
/>

Full Width

<ToggleCard
  fullWidth
  checked={false}
  onChange={() => {}}
  label="Full Width Card"
  description="This card takes full width"
/>

Variants

<ToggleCard variant="normal" checked={true} onChange={() => {}} label="Normal" />
<ToggleCard variant="error" checked={true} onChange={() => {}} label="Error" />

Disabled

<ToggleCard disabled checked={true} onChange={() => {}} label="Disabled" />

Props

Prop	Type	Default	Description
checked	boolean	required	Toggle state
onChange	ChangeEventHandler<HTMLInputElement>	required	Change handler
label	string	required	Label text
description	string	-	Description text
fullWidth	boolean	false	Full width card
variant	'normal' | 'error'	'normal'	Visual variant
disabled	boolean	false	Disable card
className	string	-	CSS class for root element
classnames	ToggleCardClassNames	-	Custom class names for inner elements
ref	Ref<HTMLInputElement>	-	Ref to the underlying input element
data-test-id	string	-	Test identifier for automated testing

Also accepts all standard InputHTMLAttributes<HTMLInputElement> except type, checked, onChange, and className.

ClassNames

Key	Description
toggle	Toggle element
content	Content container
label	Label text
description	Description text

Related

• Toggle - Simple toggle switch
• ToggleGroup - Group of toggles
• CheckboxCard - Card-style checkbox