Skip to main content
Design system

Checkbox

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

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

Required


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.

Custom labels

You may want different styles applied to your labels.


API Reference

Checkbox

PropDescriptionTypeDefaultRequired
size
enum
number | 087 | 125
----False
variant
enum
primary | secondary | cta
----False
isOutline
enum
boolean | true | false
----False
label
string
----False
disabled
enum
boolean
----False
name
string
----False
value
string
----False
defaultChecked
enum
boolean | indeterminate
----False
id
string
----
True
childrenThe correspoding label to the checkbox. Allows you to pass in more than just text
enum
ReactNode
----False
asChild
enum
boolean
----False
checked
enum
boolean | indeterminate
----False
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS<{ sm: `(max-width: calc(${string} - 1px))`; md: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; lg: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; xl: `(min-width: ${string}) and (max-width: calc(${string} - 1px))`; xxl: `(min-width: ${string}) and (max-width: ${string})`; notS...
----False
required
enum
boolean
----False
onCheckedChange
(checked: boolean | "indeterminate") => void
----False