Switch

Contract

Overview

Machine-readable contract from Component Spec.

component: switchexport: Switchversion: 1tokens.visual: switchattributes: data-refineui=switch

Anatomy

Part	data-refineui
root	switch

States

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

Accessibility

Slot	Element	Role	Native
switch	button	switch	true

Keyboard

Key	Action	Native
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

Tokens

Variant

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

Variant

Select...󰯑

Recipe → Tokens

Slot bindings for variant="on" — declared in Toggle/style → switch tokens.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
track	on	background	switch.track.on	backgroundBrand	primaryBlack	primaryGray	bg-refineui-alias-background-brand
thumb	—	background	switch.thumb.default	backgroundPrimary	neutralWhite	neutral900	bg-refineui-alias-background-primary

Component token trace

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

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
switch.thumb.default	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
switch.thumb.disabledOff	backgroundBrandSubtle	primaryLightGray	neutral800	#E6E6E6	#2A2A2A
switch.thumb.disabledOn	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
switch.track.activeOff	backgroundBrandSubtle	primaryLightGray	neutral800	#E6E6E6	#2A2A2A
switch.track.activeOn	backgroundBrandActive	neutralBlack	primaryLightGray	#000000	#E6E6E6
switch.track.disabledOff	backgroundSurfaceDisabled	neutral150	neutral850	#F0F0F0	#222222
switch.track.disabledOn	backgroundBrandSubtle	primaryLightGray	neutral800	#E6E6E6	#2A2A2A
switch.track.hoverOff	backgroundSurfaceSelected	neutral200	neutral650	#EBEBEB	#5B5B5B
switch.track.hoverOn	backgroundBrandHover	primaryDarkGray	primaryLightGray	#4d4d4d	#E6E6E6
switch.track.off	backgroundPrimaryActive	neutral150	neutral800	#F0F0F0	#2A2A2A
switch.track.on	backgroundBrand	primaryBlack	primaryGray	#212121	#D4D4D4

Installation

npmyarnpnpmbun

npm install @refineui/react @refineui/tokens

Usage

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

<Switch checked={isEnabled} onCheckedChange={setIsEnabled} />

<Switch
  checked={darkMode}
  onCheckedChange={setDarkMode}
  aria-label="Toggle dark mode"
/>

API Reference

Prop	Default	Type	Description
checked	—	boolean	Controlled checked state.
onCheckedChange	—	(checked: boolean) => void	Event handler when checked state changes.
disabled	false	boolean	Disables interaction.