Component

Toggle

Render controlled or uncontrolled switches with role=switch semantics and token-backed motion.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Toggle } from "@chitrank2050/monoline-ui/toggle"

Basic usage

<Toggle
  checked={enabled}
  onCheckedChange={setEnabled}
  aria-label="Enable notifications"
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Toggle handles one binary setting that takes effect immediately, whether its state is controlled or internal.

Avoid when

The value is submitted with a form, belongs to a mutually exclusive group, or is an action rather than persistent state.

Accessibility

Toggle uses a button with role switch and aria-checked. Its accessible label should describe the setting, not the action that will happen next.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

checkedbooleanControlled checked state

defaultCheckedbooleanInitial uncontrolled checked state

onCheckedChange(checked: boolean) => voidState change callback

sizesm | md | lgToggle scale

Design tokens

Theme variables this component reads for color, spacing, and motion.

--duration-shortCSS varTrack and thumb transition duration

--ease-out-expoCSS varThumb movement easing without overshoot

--accent / --accent-softCSS varOn-state palette

--buttonCSS varOff-state track surface

Implementation

The source used by the example above, including any state it needs.

import { Toggle } from "@chitrank2050/monoline-ui/toggle"

export function SettingsToggle() {
  return (
    <Toggle
      defaultChecked
      aria-label="Enable dark mode"
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentSegmented ControlComponent · ReferenceReference→02ComponentTheme SwitcherComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview