Toggle
A two-state button that can stand alone or work inside a group.
Overview
Use Toggle for a button that can be pressed or not pressed.
Toggle is useful for formatting buttons, favorite buttons, compact filters, view options, and controls where the pressed state matters.
Use Toggle Group when several toggles belong to the same control. A group can behave like one shared choice, or it can allow several toggles to be pressed at the same time.
Anatomy
A single toggle has a button, label or icon, pressed state, variant, size, and disabled state.
A toggle group has a wrapper, toggle items, optional separators, shared variant and size values, and a shared pressed state model.
Behavior
Use Toggle when the pressed state is visible and meaningful. Use Switch for settings that read as on or off.
Use a single-selection group when the choices are mutually exclusive. Use a multiple-selection group when each toggle can be changed independently but the controls should still look related.
Accessibility
Icon-only toggles need accessible names. Make the pressed state visible through more than color when possible.
Each item in a group also needs a clear accessible name. Tooltips can explain icon-only controls, but the toggle should still have an aria-label.
Installation
npx love-ui@latest add toggleUsage
import { Toggle, ToggleGroup } from "@/components/ui/toggle"<Toggle>Toggle</Toggle><ToggleGroup defaultValue={["bold"]}>
<Toggle value="bold" aria-label="Toggle bold">
Bold
</Toggle>
<Toggle value="italic" aria-label="Toggle italic">
Italic
</Toggle>
<Toggle value="underline" aria-label="Toggle underline">
Underline
</Toggle>
</ToggleGroup>Examples
The examples show standalone toggles first, then grouped toggles with shared styles and state.
Outline
With Icon
Small Size
Large Size
Disabled
Icon Group
Toggle Group
Toggle Group is included in the same component file. Use it when related toggles should sit together and share the same size, variant, and state model.
The group passes its variant and size values to the toggles inside it, so the grouped control stays visually consistent.