Checkbox Group
Selectable card-style options for multi-select choices. Each card highlights when selected with a primary colour treatment. Supports optional icons, subtitles, descriptions, and disabled states.
Default
A vertical list of selectable cards. Pass an options array and optionally control selection with value and onChange.
Sizes
Two sizes are available. sm (default) uses text-sm with a compact icon badge. md uses text-base and an icon with the concentric ring treatment.
Small (default)
Medium
With icons
Pass an icon on each option to render a circular icon badge that adapts colour to the selected state.
With group label
Use label to display a heading above the group.
Choose your plan
Horizontal
Use orientation="horizontal" to lay cards side-by-side.
Disabled
Set isDisabled on the group to disable all options, or on individual options to disable them selectively.
Group disabled
Individual option disabled
Icon card
Use variant="icon-card" for a two-section card layout: a header row with the icon, title, and check indicator, and a body section with a large price display, description, and optional badge pill.
Small
Medium
Disabled
Mobile (narrow cards, horizontal)
Avatar
Use variant="avatar" to display a person card with a circular avatar, name, handle, and role. Pass avatarSrc for the image, title for the name, subtitle for the @handle, and description for the role line.
Small
Medium
Disabled
Mobile (narrow cards)
Radio
Use variant="radio" for a card with a circular radio-button indicator on the left. Semantically still multi-select; use a single defaultValue entry when you want single-select behaviour.
Small
Medium
Disabled
Checkbox
Use variant="checkbox" for a card with a square checkbox indicator on the left. Identical behaviour to icon-simple but without an icon badge — just the control, title, subtitle, and description.
Small
Medium
Disabled
Standalone CheckboxCard
Use CheckboxCard directly when you need a single selectable card outside of a group.