Checkbox Card

Checkbox with label and description; supports indeterminate, groups and a card style.

Import

import { Checkbox, CheckboxGroup } from '@marbleui/ui'

This is a style of checkbox; see its examples for all variants.

Props

<Checkbox>

Prop	Type	Default	Description
description	`ReactNode`	`—`
variant	`'default' \| 'card'`	`'default'`

Also accepts React Aria props (111).

<CheckboxGroup>

Prop	Type	Default
children	`ReactNode`	`—`
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
label	`ReactNode`	`—`

Also accepts React Aria props (94).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Checkbox · React Aria CheckboxGroup. Follow the primitive's docs for the full keyboard map.

Usage notes

Checkbox with variant="card": a bordered card for options that need a line of explanation, such as add-ons or permissions. Same component and props as the plain checkbox.

<CheckboxGroup label="Add-ons" defaultValue={['backups']}>
  <Checkbox variant="card" value="backups" description="Daily snapshots, kept 30 days.">Automatic backups</Checkbox>
  <Checkbox variant="card" value="sso" description="SAML and SCIM provisioning.">Single sign-on</Checkbox>
</CheckboxGroup>

Set variant="card" on each Checkbox; CheckboxGroup has no variant of its own.
The whole card is the checkbox’s label, so a click anywhere toggles it and the checked card gets an accent border and tint. Don’t put links or buttons inside.
The title and description are both read as the checkbox’s name, so keep the description to one short line.
A single card works without a group: isSelected and onChange for one opt-in such as “Email me product updates”.

Example source · show

import { useState } from 'react'
import { Checkbox, CheckboxGroup } from './checkbox'

function SelectAll() {
  const all = ['email', 'push', 'sms']
  const [selected, setSelected] = useState<string[]>(['email'])
  return (
    <div className="flex flex-col gap-2.5">
      <Checkbox
        isSelected={selected.length === all.length}
        isIndeterminate={selected.length > 0 && selected.length < all.length}
        onChange={(on) => setSelected(on ? all : [])}
      >
        All channels
      </Checkbox>
      <CheckboxGroup aria-label="Channels" value={selected} onChange={setSelected} className="pl-6">
        <Checkbox value="email">Email</Checkbox>
        <Checkbox value="push">Push</Checkbox>
        <Checkbox value="sms">SMS</Checkbox>
      </CheckboxGroup>
    </div>
  )
}

export const styles = {
  Default: () => (
    <CheckboxGroup label="Notifications" defaultValue={['mentions']}>
      <Checkbox value="mentions">Mentions</Checkbox>
      <Checkbox value="replies" description="Only threads you started.">Replies</Checkbox>
      <Checkbox value="digest" isDisabled>Weekly digest</Checkbox>
    </CheckboxGroup>
  ),
  Indeterminate: SelectAll,
  Card: () => (
    <CheckboxGroup aria-label="Add-ons" defaultValue={['backups']} className="w-80">
      <Checkbox variant="card" value="backups" description="Daily snapshots, kept 30 days.">Automatic backups</Checkbox>
      <Checkbox variant="card" value="sso" description="SAML and SCIM provisioning.">Single sign-on</Checkbox>
    </CheckboxGroup>
  ),
}

Source: packages/ui/src/checkbox/checkbox.tsx

Catalog

Category: selection
Priority: Core
Primitive: composed
React Aria: Checkbox
Base UI: Checkbox