Skip to content
DOL Studio

KidCheckbox

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

Live preview

Checkbox — 5 state variants

Radio — 3 interactive states

Test-Status variants (KID exam feedback)

Bordered (selectable cards)

Import & files

Import
import { KidCheckbox } from "@dol/ui/kid";
Source file
packages/@dol/ui/src/kid/KidCheckbox.tsx
Related files
  • packages/@dol/ui/src/kid/KidRadio.tsx

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. 

# KidCheckbox
Slug: `checkbox-radio`
Domain: kid · 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 { KidCheckbox } from "@dol/ui/kid";
```
Source: `packages/@dol/ui/src/kid/KidCheckbox.tsx`
Related: `packages/@dol/ui/src/kid/KidRadio.tsx`


## 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

    Checkbox

    Coded

  • KidInput

    KIDCoded
  • Active

    Chip

    Coded
  • Option

    Radio

    Coded

  • Input

    Coded

  • Select input

    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).