CheckboxCell

@coinbase/cds-web@8.34.1

A selectable cell that pairs a checkbox with a title and description for multi-choice selections.

Import

import { CheckboxCell } from '@coinbase/cds-web/controls/CheckboxCell'

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Related components

• Checkbox,
• ControlGroup,
• RadioCell

---

󰏖

View as Markdown

Basic usage

Loading...

󰙡

Live Code

function CheckboxCellExample() {
  const [checked, setChecked] = React.useState(false);
  return (
    <CheckboxCell
      title="Enable notifications"
      description="Get updates on your account activity."
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
      value="notifications"
    />
  );
}

States

Loading...

󰙡

Live Code

<VStack gap={2}>
  <CheckboxCell
    title="Disabled and unchecked"
    value="disabled-unchecked"
    checked={false}
    disabled
  />
  <CheckboxCell title="Disabled and checked" value="disabled-checked" checked disabled />
</VStack>

With Custom Content

Loading...

󰙡

Live Code

function CustomCheckboxCellExample() {
  const [checked, setChecked] = React.useState(true);
  return (
    <CheckboxCell
      checked={checked}
      description={
        <VStack gap={1}>
          <Text color="fgMuted" font="body">
            Stay updated with important information
          </Text>
          <Text color="fgPrimary" font="label1">
            • Security alerts
          </Text>
          <Text color="fgPrimary" font="label1">
            • Account updates
          </Text>
        </VStack>
      }
      onChange={(e) => setChecked(e.target.checked)}
      title={
        <VStack gap={0}>
          <Text font="headline">Email Notifications</Text>
          <Text color="fgPositive" font="caption">
            Recommended
          </Text>
        </VStack>
      }
      value="notifications"
    />
  );
}