Components
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
Basic 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> );}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-checked: 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="border-dashed rounded-full px-4 py-2 aria-checked:bg-emerald-600 aria-checked:border-emerald-600" > <Sparkles className="size-4" /> Dashed </Toggle> </div> );}API Reference
Toggle
| 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 |
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 |
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 |