Components

Switch

On/off toggle for settings that apply immediately: a 30×18 pill track with a white knob.

Usage

Use it to:

  • turn a setting on or off with an immediate effect
  • settings lists and preference panels

Don’t use it to:

  • choices that are submitted later with a form (use Checkbox)
  • choosing between two named options (use RadioGroup or SegmentedControl)

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SwitchExample.tsx
import { useState } from 'react';
import { Switch } from '@krackedui/motion';

export function OfflineSwitch() {
  const [on, setOn] = useState(true);
  return (
    <Switch label="Available offline" checked={on} onCheckedChange={setOn} />
  );
}

Examples

States

Size

sm (24×14) for dense rows.

Settings row

Lock page
Prevent accidental edits.

Dark theme

API Reference

Switch

Radix Switch (a <button role="switch">); supports all of its props. Adds:

PropTypeDefault
checked
boolean
defaultChecked
boolean
false
onCheckedChange
(checked: boolean) => void
label
ReactNode
invalid
boolean
false
size
"sm""md"
"md"
disabled
boolean
false
name
string
required
boolean
false
className
string

Accessibility

  • Tab focuses the switch; Space and Enter toggle it. State is announced through role="switch" + aria-checked.
  • Name it with label, aria-label or aria-labelledby.
  • The button is 24px tall on touch screens; the track keeps its size. The knob does not animate with reduced motion.
© 2026 Motion. Internal documentation.