Default
Show the codeHide the code
Default, code
<Checkbox>Remember me</Checkbox>Checkbox
Turn one independent option on or off, or pick several from a group.
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Checkbox (dual and mixed)
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
Checked
Show the codeHide the code
Checked, code
<Checkbox defaultSelected>Remember me</Checkbox>Indeterminate
Show the codeHide the code
Indeterminate, code
<Checkbox isIndeterminate>Select all members</Checkbox>With description
Show the codeHide the code
With description, code
<Checkbox description="About one email a month.">Email me about product updates</Checkbox>Invalid
Show the codeHide the code
Invalid, code
<Checkbox isInvalid isRequired>I agree to the terms</Checkbox>Disabled
Show the codeHide the code
Disabled, code
<Checkbox isDisabled defaultSelected>Remember me</Checkbox>Mobile size
Show the codeHide the code
Mobile size, code
<Checkbox size="lg" defaultSelected>Remember me</Checkbox>Loading
Show the codeHide the code
Loading, code
<Checkbox isLoading defaultSelected>Save to my library</Checkbox>Label hidden
Show the codeHide the code
Label hidden, code
<Checkbox hideLabel>Select Priya Shah</Checkbox>Long label (wraps)
Show the codeHide the code
Long label (wraps), code
<Checkbox className="max-w-xs">Send me a summary of comments, mentions and replies on projects I follow, once a week</Checkbox>Group
Send meChoose any.
Show the codeHide the code
Group, code
<CheckboxGroup label="Send me" defaultValue={['comments']} hint="Choose any.">
<Checkbox value="updates">Product updates</Checkbox>
<Checkbox value="comments">Comments</Checkbox>
<Checkbox value="digest">Weekly digest</Checkbox>
</CheckboxGroup>Tokens
The 22 design tokens Checkbox reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 22 tokens
| Token | Value now | CSS variable |
|---|---|---|
| checkbox.bg | … | --sd-checkbox-bg |
| checkbox.bg-checked | … | --sd-checkbox-bg-checked |
| checkbox.bg-checked-hover | … | --sd-checkbox-bg-checked-hover |
| checkbox.bg-checked-pressed | … | --sd-checkbox-bg-checked-pressed |
| checkbox.bg-pressed | … | --sd-checkbox-bg-pressed |
| checkbox.border | … | --sd-checkbox-border |
| checkbox.border-width | … | --sd-checkbox-border-width |
| checkbox.gap | … | --sd-checkbox-gap |
| checkbox.label | … | --sd-checkbox-label |
| checkbox.mark | … | --sd-checkbox-mark |
| checkbox.radius | … | --sd-checkbox-radius |
| checkbox.size | … | --sd-checkbox-size |
| color.bg.muted | … | --sd-color-bg-muted |
| color.border.subtle | … | --sd-color-border-subtle |
| color.icon.default | … | --sd-color-icon-default |
| color.text.disabled | … | --sd-color-text-disabled |
| field.hint | … | --sd-field-hint |
| input.border-invalid | … | --sd-input-border-invalid |
| motion.duration.fast | … | --sd-motion-duration-fast |
| motion.easing.standard | … | --sd-motion-easing-standard |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
| target.min | … | --sd-target-min |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Checkbox, CheckboxGroup } from "@superduperui/react"Props
Checkbox also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
childrenrequired | ReactNode | Visible label. The whole label row is the hit area (44px tall in Comfortable). |
description | string | Optional second line, part of the accessible description. |
size | 'default' | 'lg'Default 'default' | default: a 20px box; lg (mobile): a 24px box. Both sit in a 44px label row (2.5.5). |
isLoading | booleanDefault false | Saving the change: shows a spinner in the box, sets aria-busy and ignores presses until it ends. |
hideLabel | booleanDefault false | Keep the label (and description) as the accessible name but hide them visually, so the box hugs: for rows and grids where a visible title or column header already names the checkbox. The hit area stays 44px. |
When to use it
Use it for
- Consent and opt-ins
- Choosing several items (with CheckboxGroup)
Use something else for
- Settings that apply immediately: use Switch
- One choice from many: use RadioGroup (Tier 2)
Accessibility
Screen readers announce "Remember me, checkbox, not checked".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Never pre-tick consent boxes
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 240 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 200 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 64 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 72 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the checkbox |
| Space | Space checks it |
| Space | Space unchecks it |
In Figma
The Figma component is Checkbox, with Checked (False, True, Indeterminate); State (Default, Hover, Pressed, Focus, Disabled); Size (Default, Mobile); Label visibility (Visible, Hidden); Width (Fit, Full). The Figma library isn’t published yet.
Figma to code: Checked (False, True = defaultSelected, Indeterminate = isIndeterminate); State (Default, Hover, Pressed, Focus, Disabled = isDisabled); Label → children; Description → description when Show description; Size → size (Default = "default", Mobile = "lg"); Invalid → isInvalid; Loading → isLoading; Label visibility → hideLabel (Visible = false, Hidden = true); Width (Fit, Full; preview only).