Core ElementsFree

Checkbox

A binary input, part of the Base UI checkbox primitive.

Usage

Installation

bash

npm install @wunderui/react

Then import what you need:

tsx

import {
  Checkbox,
  CheckboxButtonGroup,
  CheckboxField,
  CheckboxFieldProps,
} from "@wunderui/react"

Examples

Checked

The checkbox on its own — click to toggle.

Checkbox rows

Rows for a person, an icon button, an icon and a payment method — the whole row toggles.

AVAnna VogelGive Anna access to this projectLight modeUse the light theme in the editorAllow sign-upsNew people can join the workspaceMastercardEnding in 4242 · expires 08/28

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

File list with selection

A file table: the header checkbox selects all rows, row checkboxes pick single files, switches toggle sharing.

	Name	Size	Shared
	brand-guide.pdf	4.2 MB
	hero.png	1.1 MB
	tokens.json	24 KB
	onboarding.fig	18 MB

Export dialog

Pick an export format from radio rows and add options with checkboxes.

Export invoices

3 invoices selected

PDFOne file per invoicePrintSend to the default printer

Include payment details Merge into a single file

Selectable file card

A file card that is selected with the checkbox in its corner.

Brand

12 files · 48 MB

Screens

12 files · 48 MB

PreviousCarousel NextCollapsible