react-three-toggle

Multi-value toggle component for React. Cycle through three or more options on click.

A small, dependency-free toggle that cycles through 3+ options with a sliding indicator. Click or use arrow keys. Supports controlled / uncontrolled modes, wrap-around, horizontal / vertical orientation, and form integration via a hidden input.

🌐 Demo: https://react-three-toggle.kkweb.io

Install

npm install react-three-toggle

Requires React 18 or 19.

Usage

import { ThreeToggle } from "react-three-toggle";

export function App() {
  return (
    <ThreeToggle
      values={["light", "auto", "dark"]}
      defaultValue="auto"
      onValueChange={(v) => console.log(v)}
    />
  );
}

Rich labels:

<ThreeToggle
  values={[
    { label: "🌞 Light", value: "light" },
    { label: "🤖 Auto", value: "auto" },
    { label: "🌙 Dark", value: "dark" },
  ]}
/>

API

Prop	Type	Default	Description
values	string[] | { label?, value }[]	—	Options. At least one required.
defaultValue	string	first option	Initial value (uncontrolled).
value	string	—	Controlled value.
onValueChange	(value: string) => void	—	Fired on selection change.
wrap	boolean	true	Wrap from last back to first; set false to stop at the end.
orientation	"horizontal" | "vertical"	"horizontal"	Layout direction.
name	string	—	Renders a hidden input for form submission.
disabled	boolean	false	Disable interaction.
className	string	—	Root class.
indicatorClassName	string	—	Indicator class.
optionClassName	string	—	Option class.

Each option exposes data-selected="true" when active. Root exposes data-three-toggle, data-orientation, data-disabled.

License

MIT