Checkbox

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

Import

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

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

Independent on/off choice, or a multi-select list through CheckboxGroup. For a setting that applies immediately use Switch; for exactly one of several use RadioGroup.

<CheckboxGroup label="Notifications" defaultValue={['mentions']}>
  <Checkbox value="mentions">Mentions</Checkbox>
  <Checkbox value="replies" description="Only threads you started.">Replies</Checkbox>
</CheckboxGroup>

Single checkbox: isSelected + onChange (boolean), or defaultSelected. isIndeterminate shows the dash state, handy for a select-all above a group.
In a group: value + onChange (string array) or defaultValue; each Checkbox needs a value.
variant="card" makes the whole row a bordered target. CheckboxGroup also takes description and errorMessage.
A group without a visible label needs aria-label.

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: Foundation
Primitive: react-aria
React Aria: Checkbox
Base UI: Checkbox