Checkbox Card

A selectable card component that combines checkbox functionality with rich content display.

Anatomy

<script>
  import {
    CheckboxCard,
    CheckboxCardControl,
    CheckboxCardContent,
    CheckboxCardLabel,
    CheckboxCardDescription,
    CheckboxCardIndicator,
    CheckboxCardAddon,
  } from "@saas-ui/svelte/components/checkbox-card";
</script>

<CheckboxCard.Root>
  <CheckboxCardControl>
    <CheckboxCardContent>
      <CheckboxCardLabel>Option Label</CheckboxCardLabel>
      <CheckboxCardDescription>Option description</CheckboxCardDescription>
    </CheckboxCardContent>
    <CheckboxCardIndicator />
  </CheckboxCardControl>
  <CheckboxCardAddon>Additional info</CheckboxCardAddon>
</CheckboxCard.Root>

Examples

Basic Accessibility

Basic checkbox card with label and description.

<CheckboxCard.Root aria-label="Next.js" class="max-w-60">
	<CheckboxCard.Control>
		<CheckboxCard.Content>
			<CheckboxCard.Label>Next.js</CheckboxCard.Label>
			<CheckboxCard.Description>Best for apps</CheckboxCard.Description>
		</CheckboxCard.Content>
		<CheckboxCard.Indicator />
	</CheckboxCard.Control>
</CheckboxCard.Root>

Disabled Accessibility

Disabled checkbox card that prevents user interaction.

<CheckboxCard.Root aria-label="Disabled" disabled class="max-w-xs">
	<CheckboxCard.Control>
		<CheckboxCard.Content>
			<CheckboxCard.Label>Disabled</CheckboxCard.Label>
			<CheckboxCard.Description>This is a disabled checkbox</CheckboxCard.Description>
		</CheckboxCard.Content>
		<CheckboxCard.Indicator />
	</CheckboxCard.Control>
</CheckboxCard.Root>

Group Accessibility

Group of checkbox cards for selecting multiple options with shared state.

<VStack gap={1.5}>
	<Text size="sm" class="font-medium">Select framework(s)</Text>
	<HStack gap={2} class="items-stretch">
		{#each items as item}
			<CheckboxCard.Root
				aria-label={item.title}
				checked={groupValue.includes(item.value)}
				onCheckedChange={({ checked }) => {
					if (checked) {
						groupValue = [...groupValue, item.value];
					} else {
						groupValue = groupValue.filter(
							(v) => v !== item.value,
						);
					}
				}}
			>
				<CheckboxCard.Control>
					<CheckboxCard.Content>
						<CheckboxCard.Label>{item.title}</CheckboxCard.Label>
						<CheckboxCard.Description>{item.description}</CheckboxCard.Description>
					</CheckboxCard.Content>
					<CheckboxCard.Indicator />
				</CheckboxCard.Control>
			</CheckboxCard.Root>
		{/each}
	</HStack>
</VStack>

Sizes Accessibility

Use the size prop to change the size of the checkbox card. Available sizes: sm, md, lg.

<Box class="w-64">
	<VStack gap={2}>
		{#each checkboxCardSizes as size}
			<CheckboxCard.Root aria-label="Checkbox {size}" {size}>
				<CheckboxCard.Control>
					<CheckboxCard.Content>
						<CheckboxCard.Label>Checkbox ({size})</CheckboxCard.Label>
					</CheckboxCard.Content>
					<CheckboxCard.Indicator />
				</CheckboxCard.Control>
			</CheckboxCard.Root>
		{/each}
	</VStack>
</Box>

Variants Accessibility

Use the variant prop to change the visual style. Available variants: subtle, surface, outline.

<Box class="w-64">
	<VStack gap={2}>
		{#each checkboxCardVariants as variant}
			<CheckboxCard.Root
				aria-label="Checkbox {variant}"
				{variant}
				checked
				colour="teal"
			>
				<CheckboxCard.Control>
					<CheckboxCard.Content>
						<CheckboxCard.Label>Checkbox ({variant})</CheckboxCard.Label>
					</CheckboxCard.Content>
					<CheckboxCard.Indicator />
				</CheckboxCard.Control>
			</CheckboxCard.Root>
		{/each}
	</VStack>
</Box>

With Addon Accessibility

Checkbox card with an addon section for supplementary information like pricing.

<CheckboxCard.Root aria-label="With Addon" class="max-w-72">
	<CheckboxCard.Control>
		<CheckboxCard.Content>
			<CheckboxCard.Label>With Addon</CheckboxCard.Label>
			<CheckboxCard.Description>Some description</CheckboxCard.Description>
		</CheckboxCard.Content>
		<CheckboxCard.Indicator />
	</CheckboxCard.Control>
	<CheckboxCard.Addon>
		<HStack gap={2}>
			<Text size="sm">Some supporting text</Text>
			<Badge variant="solid" colour="indigo">New</Badge>
		</HStack>
	</CheckboxCard.Addon>
</CheckboxCard.Root>

With Icon Accessibility

Checkbox cards with icons for visual identification of options.

<HStack gap={1.5} class="flex-wrap items-stretch">
	{#each roleItems as item}
		<CheckboxCard.Root
			aria-label={item.label}
			class="w-50 flex-none"
			checked={roleValue.includes(item.label)}
			onCheckedChange={({ checked }) => {
				if (checked) {
					roleValue = [...roleValue, item.label];
				} else {
					roleValue = roleValue.filter((v) => v !== item.label);
				}
			}}
		>
			<CheckboxCard.Control align="center">
				<CheckboxCard.Content align="center">
					<Icon
						as={item.icon}
						size="md"
						weight="fill"
						class="mb-2"
					/>
					<CheckboxCard.Label>{item.label}</CheckboxCard.Label>
					<CheckboxCard.Description>{item.description}</CheckboxCard.Description>
				</CheckboxCard.Content>
				<CheckboxCard.Indicator />
			</CheckboxCard.Control>
		</CheckboxCard.Root>
	{/each}
</HStack>

Props

Prop	Type	Default	Description
`variant`	`subtle \| surface \| outline`	`outline`	The visual style of the component.
`size`	`sm \| md \| lg`	`md`	The size of the component.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour theme of the component.
`disabled`	`boolean`	`false`	Whether the component is disabled.
`checked`	`boolean`	`false`	Whether the checkbox card is checked.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.