CheckboxCard

CheckboxCard combines checkbox behavior with a richer card surface for plans, templates, and selectable settings tiles.

Overview

CheckboxCard builds on Card and adds a small card-specific styling layer for orientation, hover, checked, indeterminate, and disabled border treatment.

Public CSS Variables

Daily backups

Snapshots are kept for 30 days.

Variable	Value	Affects
card surface override hook		No visible change in this state
main border color, adjusted by state		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root .checkboxCard element owns orientation, hover, active, checked, and disabled border styling.

Content

CheckboxCardContent, CheckboxCardTitle, and CheckboxCardDescription rely mostly on the Card text and spacing layer.

Control

The control visuals are driven by the composed checkbox-card control parts.

State And Variant Interaction

data-orientation='vertical' | 'horizontal' changes layout direction and spacing.
data-variant='primary' | 'secondary' changes checked and indeterminate border color.
:has(input[type='checkbox']:checked) and :has(...:indeterminate) drive selected border state.
Disabled state remaps the border color to disabled theme tokens.

Examples

Local minimum width override

The root has min-width: 220px. Lower it with a local class when several short cards should fit in one row; the example imports the stylesheet next to it.

.compactPlanCard {
  min-width: 104px;
}

LTRRTL

local-minimum-width-override.tsx · 40 lines

import {
  CheckboxCard,
  CheckboxCardContent,
  CheckboxCardControl,
  CheckboxCardControlCheckedIcon,
  CheckboxCardControlIndeterminateIcon,
  CheckboxCardControlInput,
  CheckboxCardDescription,
  CheckboxCardTitle,
  CheckboxIndicator,
} from '@vega-ui/react';
import './local-minimum-width-override.css';

Custom state icons

Children of CheckboxCardControlCheckedIcon and CheckboxCardControlIndeterminateIcon replace the default icon of that state. The other state keeps its default icon.

LTRRTL

custom-state-icons.tsx · 49 lines

import {
  CheckboxCard,
  CheckboxCardContent,
  CheckboxCardControl,
  CheckboxCardControlCheckedIcon,
  CheckboxCardControlIndeterminateIcon,
  CheckboxCardControlInput,
  CheckboxCardDescription,
  CheckboxCardTitle,
  CheckboxIndicator,
} from '@vega-ui/react';
import { Diff, Rocket } from '@vega-ui/icons';

Do Not Override

breaking the labeled-card click target with pointer-events hacks
styling checked cards in ways that hide disabled or indeterminate state
treating descriptive text spacing as if it were independent from card orientation