Checkbox

󰆘CheckedUnchecked

계약

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

토큰

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

설치

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

사용법

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 레퍼런스

Prop	Default	Type	Description
label	—	string	체크박스 레이블 텍스트.
description	—	string	레이블 아래 선택적 설명.
variant	"default"	"default" | "circular"	시각적 변형 스타일.
checked	—	boolean	제어형 체크 상태.
disabled	false	boolean	인터랙션을 비활성화합니다.