Toggle

The Toggle - a classic binary switch that's been around since the dawn of UI design. Simple, elegant, and always ready to flip between states. It's like a light switch, but for your digital world.

Preview

Code

Installation

First, make sure you have the required dependencies:

npx vynk add toggle

yarn vynk add toggle

pnpm dlx vynk add toggle

bunx --bun vynk add toggle

Usage

Here's how to implement this trusty component:

import { Toggle } from "@/components/ui/toggle"

// Your component
const MyComponent = () => {
  const [isEnabled, setIsEnabled] = React.useState(false)

  return (
    <Toggle
      isOn={isEnabled}
      toggleOn={() => setIsEnabled(!isEnabled)}
    />
  )
}

Props

The component accepts these straightforward props:

Prop	Type	Required	Description
`isOn`	`boolean`	Yes	The current state of the toggle (true for on, false for off)
`toggleOn`	`() => void`	Yes	Callback function that handles the toggle state change
`className`	`string`	No	Additional CSS classes for custom styling

Features

Smooth Animations: Elegant transitions that make state changes feel natural
Responsive Design: Looks crisp on any screen size
Accessible: Fully keyboard navigable and screen reader friendly
Dark Mode Support: Adapts to your theme preferences with style

Common Issues

"The toggle isn't moving!" - Make sure you've provided both isOn and toggleOn props
"The animations are janky!" - Check if you have the latest version of motion installed
"It's not working in dark mode!" - Verify your theme configuration is properly set up

Contributing

Found a bug or have an improvement in mind? We welcome your contributions! Just make sure your code follows our standards and includes appropriate tests.

The Toggle is a reliable workhorse of UI components - simple, effective, and always ready to serve! 🎯

Vynk