Client component

Checkbox Card

A card-shaped checkbox: the whole surface is the click target, with room for a title, description and leading addon. It joins Checkbox.Group exactly like Checkbox does: give it a value inside a group and selection accumulates.

AnalyticsTraffic and conversion reportsAutomationWorkflows and triggersSupportShared inbox and live chat

import { Checkbox, CheckboxCard, Grid } from "astralis-ui";

export function CheckboxCardDemo() {
  return (
    <Checkbox.Group defaultValue={["analytics"]}>
      <Grid columns={{ base: "1", sm: "3" }} gap="3" w="full" maxW="2xl">
        <CheckboxCard value="analytics" description="Traffic and conversion reports">
          Analytics
        </CheckboxCard>
        <CheckboxCard value="automation" description="Workflows and triggers">
          Automation
        </CheckboxCard>
        <CheckboxCard value="support" description="Shared inbox and live chat">
          Support
        </CheckboxCard>
      </Grid>
    </Checkbox.Group>
  );
}

AnalyticsTraffic and conversion reports

Title

value

indicator

size

colorScheme

invaliddisabled

import { CheckboxCard } from "astralis-ui";

<CheckboxCard
  description="Traffic and conversion reports"
  defaultChecked
>
  Analytics
</CheckboxCard>

Import#

import { CheckboxCard, Checkbox } from "astralis-ui";

Usage#

Put the cards inside a Checkbox.Group and give each a value: the group owns the selection, so defaultValue, value/onValueChange and disabled all work exactly as they do for plain checkboxes. On its own, a card is a single checkbox with the native checked/defaultChecked API.

addon puts an icon or avatar beside the copy, and size="sm" tightens the card for dense settings lists. Because each card is a real checkbox, the group submits with a native form and every card is its own tab stop.

EmailA digest every morningPush notificationsAs things happenSMSSecurity alerts only

import { Checkbox, CheckboxCard, Icon, VStack } from "astralis-ui";
import { Bell, Mail, MessageSquare } from "lucide-react";

export function CheckboxCardAddon() {
  return (
    <Checkbox.Group defaultValue={["email"]}>
      <VStack gap="2" alignItems="stretch" w="full" maxW="sm">
        <CheckboxCard value="email" size="sm" addon={<Icon as={Mail} />} description="A digest every morning">
          Email
        </CheckboxCard>
        <CheckboxCard value="push" size="sm" addon={<Icon as={Bell} />} description="As things happen">
          Push notifications
        </CheckboxCard>
        <CheckboxCard value="sms" size="sm" addon={<Icon as={MessageSquare} />} description="Security alerts only" disabled>
          SMS
        </CheckboxCard>
      </VStack>
    </Checkbox.Group>
  );
}

Props#

Extends the native checkbox input's props, plus:

Prop	Type	Default	Description
`children`	`ReactNode`	None	Card title.
`description`	`ReactNode`	None	Secondary line under the title.
`addon`	`ReactNode`	None	Leading slot for an icon or avatar.
`checked / defaultChecked / onChange`	`boolean / boolean / (event) => void`	None	The native checkbox API. Inside a Checkbox.Group, pass value instead.
`value`	`string`	None	Identifies the card inside a Checkbox.Group.
`indicator`	`boolean`	`true`	Shows a tick in the corner while checked.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Padding and text scale.
`colorScheme`	`all 15 schemes`	`"brand"`	Hue of the checked card.
`invalid`	`boolean`	`false`	Error styling and aria-invalid.
`disabled`	`boolean`	`false`	Blocks interaction. Inherited from a Checkbox.Group or Field.

Keyboard#

Key	Action
`Tab` / `Shift+Tab`	Move to the next / previous card
`Space`	Toggle the focused card

For single selection, use Radio Card.