Toggle

<Toggle>TailwindCSS Modules

A two-state button that can be toggled on or off, often grouped together for single or multiple selection.

InstallationColoxo CLI

npx coloxo add toggle --style coloxo-css

ES Module ImportPlayground / npm package

import { Toggle, ToggleGroup, ToggleGroupItem } from '@coloxo/ui';

Design Tokens:

--cx-brand-50: #EEF2FF--cx-brand-600: #2348FF--cx-slate-100: #F1F5F9--cx-radius-md: 8px

1. Variant Matrix

Toggles can be used standalone or in groups for radio-like or checkbox-like behavior.

Standalone Toggle	Group (Single Select)	Group (Multiple Select)
States

2. Interactive Props Configurator

Selection Mode

Disabled State

Visual Render Canvas

tsx

1<ToggleGroup2  type="single"3  aria-label="Text styling"4>5  <ToggleGroupItem value="bold" icon={<Bold />} aria-label="Bold" />6  <ToggleGroupItem value="italic" icon={<Italic />} aria-label="Italic" />7  <ToggleGroupItem value="underline" icon={<Underline />} aria-label="Underline" />8</ToggleGroup>

3. Dark theme

Toggles invert gracefully, using subtle highlight colors for pressed states.

4. Enterprise layout compositions

Toggles are perfect for toolbars, formatting options, and quick view switchers.

Editor Toolbar

Accessibility

Aria Pressed

Standalone Toggles use `aria-pressed` to indicate state. ToggleGroups use radiogroup semantics (for single select) or independent toggle buttons (for multiple select).

Icon Labels

When using icon-only Toggles, always provide an `aria-label` so screen readers can identify the button's purpose.

Props

Name	Type	Default	Description
pressed	boolean	—	Controlled pressed state (Toggle).
defaultPressed	boolean	—	Uncontrolled initial pressed state.
onPressedChange	(pressed: boolean) => void	—	Pressed change handler.
size	"sm" \| "md" \| "lg"	md	Control size.
variant	"default" \| "outline"	default	Visual style for standalone Toggle.
icon	ReactNode	—	Optional leading icon.
ToggleGroup.type	"single" \| "multiple"	single	Selection mode.
ToggleGroup.value	string \| string[]	—	Controlled value(s).
ToggleGroupItem.value	string	—	Item value within the group.