Skip to content
DOL Studio

Checkbox

Design: Stable Code: Coded formmulti-choiceprimitive 4 Figma sets Checkbox-Radio/Single

Live preview

Checkbox · variant matrix

4 rows (CHECKBOX_COLORS × CHECKBOX_SIZES) × 5 states. Adding a value to the runtime arrays auto-surfaces in this matrix.
DefaultCheckedIndeterminateDisabled (off)Disabled (on)
Primary · sm
Primary · md
Tertiary · sm
Tertiary · md

Interactive · checkbox

→ not yet

Radio · variant matrix

4 rows (RADIO_COLORS × RADIO_SIZES) × 3 states. Adding a value to the runtime arrays auto-surfaces in this matrix.
DefaultCheckedDisabled
Primary · sm
Primary · md
Tertiary · sm
Tertiary · md

Interactive · radio group

→ picked: A

Import & files

Import
import { Checkbox } from "@dol/ui/checkbox";
Source file
packages/@dol/ui/src/checkbox/Checkbox.tsx
Related files
  • packages/@dol/ui/src/radio/Radio.tsx

Spec

Spec Props · Axes · Usage

Props

Prop Type Default Description
tone 'brand' | 'tertiary' | 'success' | 'danger' 'brand' —
variant 'bold' | 'matte' 'bold' —
size 'sm' | 'md' | 'lg' | 'xl' 'md' —
indeterminate boolean false —
label ReactNode — —
description ReactNode — —
wrapperClassName string — —
checked / defaultChecked / onChange / name / value / disabled native input props — —

Variants · Tones · Sizes

Variants
boldmatte
Tones
brandtertiarysuccessdanger
Sizes
smmdlgxl

Usage

Use Checkbox for multi-select lists, filters, acknowledgements, and parent/child selection. Use Switch for immediate on/off settings. Use Radio for mutually exclusive single-choice lists.

Examples

Examples 4
  • Core states - brand bold
  • Size scale - Figma 12 / 16 / 20 / 24
  • Tones and visual styles
  • Complex list rows

Figma source

Figma source 4 sets
Page
Checkbox, Radio, Chip
Sets
4
Primary set
Checkbox-Radio/Single · 108 variants Open in Figma →
Showing: Checkbox-Radio/Single
3 other sets
  • .Checkbox-Radio/Size/Group 8 variants Figma →
  • .Checkbox-Radio/Size/Single 24 variants Figma →
  • Checkbox-Radio/Group 36 variants Figma →

AI context

AI context

Markdown summary safe to paste into Claude / ChatGPT / Cursor — includes name, status, import, props, axes, examples, figma source. 

# Checkbox
Slug: `checkbox-radio`
Domain: general · Category: input
Design: stable · Code: coded


## Description
Multi-choice picker primitive (square fill state). Shares 4 Figma sets with Radio via the `Type` variant axis (Type=Checkbox shows the check-in-square fill). Use Group sets for vertical option lists, Single sets for inline use. Per Figma DS, both primitives live in one component family - Radio surfaces as a separate catalog entry pointing at the same source.


## Import
```ts
import { Checkbox } from "@dol/ui/checkbox";
```
Source: `packages/@dol/ui/src/checkbox/Checkbox.tsx`
Related: `packages/@dol/ui/src/radio/Radio.tsx`


## Props (8)
| Prop | Type | Default | Description |
|---|---|---|---|
| `tone` | `'brand' | 'tertiary' | 'success' | 'danger'` | 'brand' |  |
| `variant` | `'bold' | 'matte'` | 'bold' |  |
| `size` | `'sm' | 'md' | 'lg' | 'xl'` | 'md' |  |
| `indeterminate` | `boolean` | false |  |
| `label` | `ReactNode` | — |  |
| `description` | `ReactNode` | — |  |
| `wrapperClassName` | `string` | — |  |
| `checked / defaultChecked / onChange / name / value / disabled` | `native input props` | — |  |


## Axes
Variants: `bold`, `matte`
Tones: `brand`, `tertiary`, `success`, `danger`
Sizes: `sm`, `md`, `lg`, `xl`


## Usage
Use Checkbox for multi-select lists, filters, acknowledgements, and parent/child selection. Use Switch for immediate on/off settings. Use Radio for mutually exclusive single-choice lists.


## Examples
- **Core states - brand bold**
- **Size scale - Figma 12 / 16 / 20 / 24**
- **Tones and visual styles**
- **Complex list rows**


## Figma source
Page: Checkbox, Radio, Chip
Sets: 4
Primary: Checkbox-Radio/Single
Open: https://www.figma.com/design/DqRd7UQkNGcdvYL5fwZxlf/?node-id=7313-67242

Related

  • Label

    KidCheckbox

    KIDCoded
  • Active

    Chip

    Coded
  • Option

    Radio

    Coded

  • Input

    Coded

  • Select input

    Coded

  • Uploader

    Coded

Status legend

Status legend
Stable
Design + code shipped, full DS parity.
Partial
Design ready, some variants/states missing in code.
Coded
Implemented in code; design canon may not yet exist.
Design only / Code only
One side present; awaiting the other.

Phase 1.X-5.2 detail view — read-only metadata. Code preview + recipe + live demo deferred (need @dol/ui registry integration).