Design system

Checkbox

Bundle size: 3.81 kB
Install: 
npm install @washingtonpost/wpds-checkbox
|Copy
Usage: 
import { Checkbox } from "@washingtonpost/wpds-checkbox"
|Copy
Source: View on Github

Table of Contents

Anatomy

Note: Image is not to scale

  1. Icon
  2. Background Fill
  3. Border

Options

Size

There are two sizes available 125 & 087.

Variant

There are 3 variants available primary secondary & cta.

Style

There are 2 styles available fill & outline.

Check states

A checkbox state can be true, false or indeterminate.

Behavior

Disabled

Focus

Guidance

When to use indeterminate state

When checkbox are in a group the parent checkbox will reflect the group status of the checkbox.

Click/Tap targets

The click/tap target should include the label and control the checkbox.

API Reference
PropDescriptionTypeDefaultRequired
size
enum
number | 087 | 125
----False
variant
enum
primary | secondary | cta
----False
isOutline
enum
boolean | true | false
----False
disabled
enum
boolean
----False
name
string
----False
value
string
----False
defaultChecked
enum
boolean | indeterminate
----False
id
string
----False
asChild
enum
boolean
----False
checked
enum
boolean | indeterminate
----False
required
enum
boolean
----False
onCheckedChange
(checked: boolean | "indeterminate") => void
----False
Edit this page on GitHub.