Triple Toggle

The Triple Toggle - a toggle component that's not satisfied with just being on or off. It needs more drama in its life because sometimes a regular toggle just isn't extra enough. Perfect for scenarios where you need multiple options, like choosing between different subscription plans or billing cycles.

Preview

Code

Free

Premium

Monthly

Yearly

Installation

First, make sure you have the required dependencies. This component is a bit high-maintenance:

npx vynk add triple-toggle

yarn vynk add triple-toggle

pnpm dlx vynk add triple-toggle

bunx --bun vynk add triple-toggle

Usage

Here's how to use this drama queen of a component:

import { TripleToggle } from "@/components/ui/triple-toggle"

// Your component
const MyComponent = () => {
  const [value, setValue] = React.useState("Monthly")

  return (
    <TripleToggle
      options={{
        main: "Monthly",
        grouped: {
          title: "Billing",
          subOptions: ["Yearly", "Lifetime"]
        }
      }}
      value={value}
      toggleOptions={setValue}
    />
  )
}

Props

The component accepts the following props:

Prop	Type	Required	Description
`options`	`{ main: string, grouped: { title: string, subOptions: [string, string] } }`	Yes	Configuration object that defines the toggle's options and structure.
`value`	`string`	Yes	The currently selected value.
`toggleOptions`	`(value: string) => void`	Yes	Callback function that handles value changes.
`className`	`string`	No	Additional CSS classes for custom styling.

Options Object Structure

{
  main: string,           // The main option (e.g., "Monthly" in a pricing toggle)
  grouped: {
    title: string,        // The title that appears on hover (e.g., "Premium")
    subOptions: [string, string]  // Two sub-options (e.g., ["Monthly", "Yearly"])
  }
}

Features

Smooth Animations: Because we're not savages who use abrupt transitions
Responsive Design: It looks good on all screen sizes, unlike some of your ex's selfies
Accessible: It's keyboard-friendly, because not everyone uses a mouse (shocking, I know)
Dark Mode Support: It works in the dark, unlike your plants`1

Common Issues

"The toggle isn't moving!" - Double-check that all required props are provided correctly
"The animations are janky!" - Ensure 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? Want to make it even more extra? Feel free to submit a PR. Just make sure your code is as clean as your browser history (which we all know is spotless, right?).

The Triple Toggle is designed to be both powerful and user-friendly - a reliable choice for your multi-option selection needs! 🎯

Vynk