CheckboxCard

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

Root API

Prop	Type	Default
`orientation`	`CheckboxCardOrientation`	`'vertical'`
Defines the layout direction of the card content.
`variant`	`CheckboxVariant`	`'primary'`
Variant that controls the visual style of the checkbox card. Typically used to switch between brand or neutral themes.
`size`	`CardSize`	`'md'`
Specifies the size of the card. Affects padding, font size, and possibly layout behavior.
`ref`	`Ref<HTMLElement>`	—
Ref forwarded to the card’s root element (`<article>`, or the child element with `asChild`). Useful for DOM measurements, scrolling, or imperative logic.
`asChild`	`boolean`	—
If true, renders the trigger as a child element using `Slot`. This enables custom wrappers (e.g., `<a>`, `<div>`) to inherit behavior.

Also accepts all HTML attributes.

Primary content wrapper for title and description.

Also accepts all <div> attributes.

Short primary label.

Prop	Type	Default
`as`	`HeadingAs`	—
The HTML heading tag to render (e.g., 'h1', 'h2'). Defines semantic structure and accessibility level.
`size`	`HeadingSize`	—
Visual size of the heading, independent of the `as` tag. Typically mapped to a design system's type scale. Accepts values from 1 (smallest) to 11 (largest).
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	—
Font weight of the heading text. 400: Regular; 500: Medium; 600: Semi-bold; 700: Bold; 900: Extra bold
`ref`	`Ref<HTMLHeadingElement>`	—
Ref to the native HTML heading element. Useful for DOM access or focus management.

Also accepts all <h1>–<h6> attributes.

Supporting text under the title.

Prop	Type	Default
`size`	`TextSize`	—
Visual size of the text, typically mapped to the design system’s type scale.
`asChild`	`boolean`	—
If true, renders the text as a child component using `Slot`. Useful for compatibility with native elements or other components.
`fontWeight`	`400 \| 500 \| 600 \| 700 \| 900`	—
Font weight applied to the text. Common values: 400: Regular; 500: Medium; 600: Semi-bold; 700: Bold; 900: Extra bold
`ref`	`Ref<HTMLSpanElement>`	—
Ref to the underlying `<span>` or slotted element. Useful for measuring, focusing, or DOM manipulation.

Also accepts all <span> attributes.

Visual control region for the checkbox affordance.

Prop	Type	Default
`variant`	`CheckboxVariant`	—
Visual variant of the checkbox, for theme or context switching.
`size`	`CheckboxSize`	—
Size of the checkbox input and its visual marker.
`ref`	`Ref<HTMLLabelElement>`	—
Ref to the native label element.

Also accepts all <label> attributes.

The native checkbox input. Checked state is set here: checked, defaultChecked, onChange, disabled and indeterminate.

Prop	Type	Default
`indeterminate`	`boolean`	—
Sets the native `indeterminate` property of the input. Often used when only some nested items are selected. It has no HTML attribute, so it is applied imperatively.
`ref`	`Ref<HTMLInputElement>`	—
The optional `ref` provides direct access to the underlying * `<input type="checkbox">` element for advanced use cases such * as focus management or imperative state inspection.

Also accepts all <input> attributes.

Checked-state icon.

Prop	Type	Default
`size`	`IconSize`	—
Predefined size token for the icon. Can be overridden by explicit width and height.
`ref`	`Ref<SVGSVGElement>`	—
Ref to the SVG element
`strokeWidth`	`number`	—
Stroke thickness for SVG lines and shapes (in px or pt).
`children`	`ReactNode`	—
Icon content (required). Accepts: icons from `~/icons`; custom inline SVG; third-party icon components (e.g. Lucide, Tabler)

Also accepts all HTML attributes.

Indeterminate-state icon.

Prop	Type	Default
`size`	`IconSize`	—
Predefined size token for the icon. Can be overridden by explicit width and height.
`ref`	`Ref<SVGSVGElement>`	—
Ref to the SVG element
`strokeWidth`	`number`	—
Stroke thickness for SVG lines and shapes (in px or pt).
`children`	`ReactNode`	—
Icon content (required). Accepts: icons from `~/icons`; custom inline SVG; third-party icon components (e.g. Lucide, Tabler)

Also accepts all HTML attributes.

Advanced hook for custom card-control wrappers that need size or variant.

Type	Definition	Notes
`CheckboxCardProps`	root prop type	Extends `Card` props.
`CheckboxCardContentProps`	content props	Layout wrapper props.
`CheckboxCardTitleProps`	title props	Text heading props.
`CheckboxCardDescriptionProps`	description props	Secondary text props.
`CheckboxCardControlProps`	control props	Control wrapper props.

Checked state lives on CheckboxCardControlInput, like on a native checkbox: uncontrolled through defaultChecked, controlled through checked and onChange.
indeterminate on CheckboxCardControlInput is a visual and semantic mixed state on top of checkbox behavior.
Variant and size flow through checkbox-card context.

Give CheckboxCardControlInput a name when native form submission matters.
Prefer Radio or SegmentedControl for single-choice groups.
Keep the whole card as the labeled click target rather than shrinking interaction to the tiny control.