Checkbox Card

01Preview

Change the controls to try every supported combination. The card is controlled: click anywhere on it and the code follows.

const [checked, setChecked] = useState(true)

<CheckboxCard
  label="Daily study reminder"
  sublabel="(Recommended)"
  badge={<Badge size="sm" color="blue" appearance="light">New</Badge>}
  description="A short nudge at 7 pm to keep your streak going."
  leading={<KeyIcon icon={<RiKey2Line />} size={40} />}
  checked={checked}
  onCheckedChange={setChecked}
/>

02Installation

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { CheckboxCard, KeyIcon } from '@nuton/ui'
import { RiTimerLine } from '@remixicon/react'

<CheckboxCard
  name="goals"
  value="exams"
  label="Prepare for exams"
  description="Timed practice tests and spaced review."
  leading={<KeyIcon icon={<RiTimerLine />} size={40} />}
/>

• Use cards when each option needs a description, price or visual. For a plain list of options, use Checkbox.
• The whole card is the click target. The control is a native checkbox, so name, value, required and form submission work as usual.
• Stack cards in a column and give the set a heading or a Field label. Cards fill their container's width (Figma 360px).
• Keep labels short and parallel. Put detail in description, which is announced after the name.
• The leading visual is decorative. Use a 40px KeyIcon, Avatar or a logo your app supplies.

04Variants and sizes

Checkbox Card has one size. Figma's Type property only changes the leading visual, so code takes any 40px element in `leading`.

Types (leading visual)

<CheckboxCard label="Basic" description="No leading visual." />
<CheckboxCard label="Left icon" description="A 40px key icon." leading={<KeyIcon icon={<RiKey2Line />} size={40} />} />
<CheckboxCard label="Avatar" description="A 40px avatar." leading={<Avatar name="Amara Okafor" size={40} />} />
<CheckboxCard label="Card provider, brand or company" description="Pass your own logo." leading={<img src={logo} alt="" />} />

Card Provider, Brand and Company show third-party logos in Figma. Nuton ships no brand assets (D12), so pass your own <img alt=""> or SVG; it is sized to the 40px slot.

Text options

<CheckboxCard
  label="Weekly report"
  sublabel="(Recommended)"
  badge={<Badge size="sm" color="blue" appearance="light">New</Badge>}
  description="A summary of your progress every Monday."
/>

05States and interactions

State tokens

Set on .nu-choice-card, shared with Radio Card.

06Composition examples

Onboarding: study goals

A form step where students pick any number of goals. Each card submits its value under one name.

<form onSubmit={save}>
  <p id="goals-heading">What do you want to achieve?</p>
  {goals.map((g) => (
    <CheckboxCard
      key={g.value}
      name="goals"
      value={g.value}
      label={g.label}
      description={g.description}
      leading={<KeyIcon icon={g.icon} size={40} />}
    />
  ))}
  <Button type="submit">Continue</Button>
</form>

07API reference

Props

Accessibility

You must: give each card a unique, meaningful label, and name the set with a heading or a Field.

Figma mapping

08Guidelines and related components

Do and don't

Related components

• CheckboxThe compact control for lists of options.
• Radio CardThe same card for choosing exactly one option.
• Key IconThe 40px leading visual for the Left Icon type.