Toggle

Binary on/off switch. Uses role='switch' for accessibility.

Examples

Default

Formatting Group

Multiple toggles as a formatting toolbar.

Disabled

With Icons

Outline

Toggle with outline border style.

Sizes

Toggle at different sizes.

Installation

pnpm add @rokle/components @rokle/tokens

Installs with the default Rokle brand. Generate a custom brand on rokle.app to use your own colours and personality.

Usage

import { Toggle } from "@rokle/components";

import { useState } from "react";
import { Toggle } from "@rokle/components";

export function Example() {
  const [bold, setBold] = useState(false);
  const [italic, setItalic] = useState(false);

  return (
    <div className="flex gap-2">
      <Toggle pressed={bold} onPressedChange={setBold}>Bold</Toggle>
      <Toggle pressed={italic} onPressedChange={setItalic}>Italic</Toggle>
    </div>
  );
}

Source

The implementation source for this component. Copy it into your project and customise.

API Reference

Prop	Type	Default	Description
pressed	boolean	-	Current pressed state.
onPressedChange	(pressed: boolean) => void	-	Called when toggled.
children	ReactNode	-	Toggle label.

Previous← Textarea NextAccordion →