Toggle

On/off switch component with animated handle using Framer Motion spring animation. Supports sizes and custom animation configuration.

Import

import { Toggle } from 'reablocks';

Toggle Props

Renders with role="switch", aria-checked, keyboard support (Space).

Basic Usage

const [checked, setChecked] = useState(false);
<Toggle checked={checked} onChange={setChecked} />

Sizes

<Toggle checked={checked} onChange={setChecked} size="small" />
<Toggle checked={checked} onChange={setChecked} size="medium" />
<Toggle checked={checked} onChange={setChecked} size="large" />

Disabled

<Toggle disabled checked />
<Toggle disabled checked={false} />

Custom Animation

<Toggle
  checked={checked}
  onChange={setChecked}
  animation={{
    initial: { scale: 0.7, opacity: 0.5 },
    animate: { scale: 1, opacity: 1, transition: { type: 'spring', stiffness: 300, damping: 20 } },
    whileHover: { scale: 1.1 },
    whileTap: { scale: 0.9 }
  }}
/>

No Animation

<Toggle checked={checked} onChange={setChecked} animation={{ transition: { duration: 0 } }} />

ToggleTheme Interface

interface ToggleTheme {
  base: string;                // Track styles (flex, rounded-full, bg, border)
  disabled: string;            // Disabled track
  checked: string;             // Checked track (justify-end, bg change)
  disabledAndChecked: string;  // Disabled + checked track
  handle: {
    base: string;              // Handle styles (rounded-full, bg)
    sizes: { small, medium, large };
    disabled: string;
    disabledAndChecked: string;
  };
  sizes: { small, medium, large };  // Track dimensions per size
}