Switch

<Switch>TailwindCSS Modules

A toggle switch for immediately turning a setting on or off.

InstallationColoxo CLI

npx coloxo add switch --style coloxo-css

ES Module ImportPlayground / npm package

import { Switch } from '@coloxo/ui';

Design Tokens:

--cx-brand-600: #2348FF--cx-slate-200: #E2E8F0--cx-bg-primary: #FFFFFF--cx-radius-full: 9999pxtransition: 150ms

1. Variant Matrix

Switches clearly indicate on/off state through color and position.

Default	Checked	Disabled
States	Enable overtime Applies from next cycle	Email alerts Send me daily reports	Admin mode Debug mode

Checked State

Show Description

Disabled State

Visual Render Canvas

Enable overtime

Applies from next cycle

tsx

1<Switch2  label="Enable overtime"3  description="Applies from next cycle"4/>

Switches adapt their track and thumb colors for optimal contrast in dark mode.

Enable overtime

Applies from next cycle

Email alerts

Send me daily reports

Switches are often grouped in settings pages to control application preferences.

Notification Settings

Marketing Emails

Receive updates about new products.

Security Alerts

Critical notifications about your account.

Weekly Digest

A summary of your weekly activity.

Radix UI Primitives

Built on Radix Switch, ensuring `role="switch"` and full keyboard support (Space / Enter to toggle).

Label Association

The label and description texts are automatically linked to the switch control so screen readers announce them properly.

Name	Type	Default	Description
label	ReactNode	—	Switch label text.
description	ReactNode	—	Helper text below the label.
checked	boolean	—	Controlled state.
defaultChecked	boolean	—	Uncontrolled initial state.
onCheckedChange	(checked: boolean) => void	—	State change handler.
disabled	boolean	—	Disables the switch.