Checkbox

󰆘CheckedUnchecked

Contract

Overview

Machine-readable contract from Component Spec.

component: checkboxexport: Checkboxversion: 1tokens.visual: checkboxattributes: data-refineui=checkbox

Anatomy

Part	data-refineui
root	checkbox

Variants

Axis	Values
variant	default, circular

States

Scope	Category	Values
component	environment	forced-colors, dir, prefers-contrast

Keyboard

Key	Action	Native
Space	activate	true

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Variant

Select...󰯑

󰆘CheckedUnchecked

Recipe → Tokens

Slot bindings for variant="default" — declared in Checkbox/style → tokens.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
label	—	foreground	checkbox.label.default	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary
description	—	foreground	checkbox.label.description	foregroundSecondary	neutral600	neutral350	text-refineui-alias-foreground-secondary
checkIcon	—	foreground	checkbox.checkIcon.default	foregroundInversed	neutralWhite	primaryBlack	text-refineui-alias-foreground-inversed

Component token trace

All paths in token-trace-v2.json prefixed with checkbox.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
checkbox.checkIcon.default	foregroundInversed	neutralWhite	primaryBlack	#FFFFFF	#212121
checkbox.checkIcon.disabled	foregroundSecondary	neutral600	neutral350	#6C6C6C	#D8D8D8
checkbox.label.default	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF
checkbox.label.description	foregroundSecondary	neutral600	neutral350	#6C6C6C	#D8D8D8
checkbox.label.disabled	foregroundDisabled	neutral400	neutral600	#CECECE	#6C6C6C

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

import { Checkbox } from "@refineui/react";

<Checkbox label="Accept terms and conditions" />

<Checkbox
  label="Enable notifications"
  description="Receive updates about your account"
  checked={notificationsEnabled}
  onChange={(e) => setNotificationsEnabled(e.target.checked)}
/>

<Checkbox variant="circular" label="Circular variant" />

API Reference

Prop	Default	Type	Description
label	—	string	Checkbox label text.
description	—	string	Optional description below the label.
variant	"default"	"default" | "circular"	Visual variant style.
checked	—	boolean	Controlled checked state.
disabled	false	boolean	Disables interaction.