flip-toggle

A lightweight, accessible React toggle component with smooth animations.

Installation

npm install flip-toggle

Usage

import { Toggle } from 'flip-toggle'
import 'flip-toggle/styles.css'

function App() {
  const [checked, setChecked] = useState(false)

  return (
    <Toggle 
      checked={checked} 
      onChange={setChecked}
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | checked | boolean | - | Controlled checked state | | defaultChecked | boolean | false | Initial checked state (uncontrolled) | | disabled | boolean | false | Whether the toggle is disabled | | onChange | (checked: boolean) => void | - | Callback when toggle state changes | | className | string | '' | Additional CSS classes | | id | string | - | HTML id attribute |

Controlled vs Uncontrolled

Controlled (recommended)

const [checked, setChecked] = useState(false)

<Toggle checked={checked} onChange={setChecked} />

Uncontrolled

<Toggle defaultChecked={false} onChange={(checked) => console.log(checked)} />

Customization

Override CSS variables:

.flip-toggle {
  --toggle-width: 61px;
  --toggle-height: 31px;
  --toggle-padding: 2px;
  --thumb-size: 27px;
  --toggle-bg: #e5e5ea;
  --toggle-bg-checked: #34c759;
}

Or use Tailwind classes:

<Toggle className="w-16 h-8" />

Features

• ✅ Lightweight (~3KB)
• ✅ Accessible (ARIA, keyboard navigation)
• ✅ Smooth animations
• ✅ TypeScript support
• ✅ Controlled & uncontrolled modes
• ✅ Customizable with CSS or Tailwind

Author

Ryan Cuff

License

MIT