Toggle

A toggle button component supporting controlled, uncontrolled and group multi-select modes

Installation

$npx litefy@latest add toggle
$pnpm dlx litefy@latest add toggle
$yarn dlx litefy@latest add toggle
$bun --bun litefy@latest add toggle

Usage

Simple toggles with icon content, supporting uncontrolled mode and disabled state.

"use client";import { Toggle } from "@/ui";import { Bold, Italic, Underline } from "lucide-react";export default function Demo() {  return (    <div className="flex flex-wrap gap-2">      <Toggle defaultChecked>        <Bold className="size-4" />        Bold      </Toggle>      <Toggle>        <Italic className="size-4" />        Italic      </Toggle>      <Toggle disabled>        <Underline className="size-4" />        Disabled      </Toggle>    </div>  );}

Variants

fill is the default and is shown in Basic Usage; the text variant only tints the selected text.

text

"use client";

import { Toggle } from "@/ui";

const options = [
  { label: "Bold", value: "bold" },
  { label: "Italic", value: "italic" },
  { label: "Underline", value: "underline" },
];

export default function Demo() {
  return (
    <div className="flex flex-col items-center gap-2">
      <Toggle.Group variant="text" defaultValue={[options[0].value]} options={options} />
      <p className="text-xs text-muted-foreground">text</p>
    </div>
  );
}

Group

Data-driven group mode supporting multi-select.

Selected: react

"use client";import { useState } from "react";import { Toggle } from "@/ui";const options = [  { label: "React", value: "react" },  { label: "Vue", value: "vue" },  { label: "Svelte", value: "svelte" },  { label: "Solid", value: "solid", disabled: true },];export default function Demo() {  const [value, setValue] = useState(["react"]);  return (    <div className="flex flex-col gap-3">      <Toggle.Group value={value} onChange={setValue} options={options} />      <p className="text-sm text-muted-foreground">        Selected: {value.join(", ") || "-"}      </p>    </div>  );}

Custom

Style Toggle through className for custom shapes and colors — e.g. a pill shape, a dashed border, or custom aria-pressed: colors — while keeping the checked state controlled.

"use client";

import { useState } from "react";
import { Toggle } from "@/ui";
import { Sparkles } from "lucide-react";

export default function Demo() {
  const [values, setValues] = useState<string[]>(["pill"]);
  const handleToggle = (val: string) => {
    setValues((prev) =>
      prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val],
    );
  };

  return (
    <div className="flex flex-wrap gap-2">
      <Toggle
        checked={values.includes("pill")}
        onCheckedChange={() => handleToggle("pill")}
        className="rounded-full px-4 py-2"
      >
        <Sparkles className="size-4" />
        Pill
      </Toggle>
      <Toggle
        checked={values.includes("dashed")}
        onCheckedChange={() => handleToggle("dashed")}
        className="rounded-full border border-dashed px-4 py-2 aria-pressed:bg-primary-accent aria-pressed:border-primary-accent"
      >
        <Sparkles className="size-4" />
        Dashed
      </Toggle>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	The toggle content
`checked`	`boolean`	-	Controlled checked state
`defaultChecked`	`boolean`	`false`	Default checked state (uncontrolled)
`onCheckedChange`	`(checked: boolean) => void`	-	Callback when the checked state changes
`value`	`string`	-	Value forwarded to the native button; in `Toggle.Group` it identifies each option
`disabled`	`boolean`	`false`	Disable the toggle
`variant`	`"fill" \| "text"`	`"fill"`	Visual variant: `fill` highlights with a primary background, `text` only tints the selected text
`className`	`ClassNameValue`	-	Custom class names
`...props`	`React.ComponentProps<"button">`	-	Supports all native button props (except `type`, `className`, `aria-checked`), such as `name`, `form`, `autofocus`

Pressing a disabled toggle does nothing. A custom onClick handler runs before the internal toggle logic; call e.preventDefault() inside it to prevent the checked state from changing.

Toggle.Group

Prop	Type	Default	Description
`options`	`ToggleOptionConfig[]`	-	Options data array
`value`	`string[]`	-	Controlled selected values
`defaultValue`	`string[]`	`[]`	Default selected values (uncontrolled)
`onChange`	`(values: string[]) => void`	-	Callback when values change
`disabled`	`boolean`	`false`	Disable all options
`variant`	`"fill" \| "text"`	`"fill"`	Visual variant: `fill` highlights with a primary background, `text` only tints the selected text
`className`	`ClassNameValue`	-	Custom class names, applied to the container
`itemClassName`	`ClassNameValue`	-	Custom class names, applied to each toggle

ToggleOptionConfig

Field	Type	Default	Description
`label`	`string`	-	Option display text
`value`	`string`	-	Unique identifier value
`disabled`	`boolean`	`false`	Disable the option
`className`	`ClassNameValue`	-	Custom class names, overrides `itemClassName`

Toggle

On this page