CheckboxCard

Card-style checkbox with label and description.

Also known as: selection card, toggle card, option card with checkbox

View in Storybook

When to use

• Rich checkbox with label and description (settings, feature toggles, plan selection). For simple checkboxes, use Checkbox.
• For mutual exclusion cards, use RadioCard.

Import

import { CheckboxCard } from '@vacano/ui'

Usage

const [checked, setChecked] = useState(false)

<CheckboxCard
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
  label="Premium Plan"
  description="Access all features and priority support"
/>

With Description

<CheckboxCard
  checked={true}
  onChange={() => {}}
  label="Email notifications"
  description="Receive updates about your account"
/>

Full Width

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

Variants

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

Disabled

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

Props

Prop	Type	Default	Description
checked	boolean	required	Checked 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	CheckboxCardClassNames	-	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
checkbox	Checkbox element
content	Content container
label	Label text
description	Description text

Related

• ToggleCard - Card-style toggle switch
• Checkbox - Simple checkbox
• CheckboxGroup - Group of checkboxes
• RadioCard - Card-style radio for mutual exclusion