Toggle
A two-state button that can be either on or off.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Toggle />
When to Use
- Activate or deactivate a formatting option such as Bold, Italic, or Underline in a toolbar.
- Represent a binary on/off state that is clearly visible as a pressed/unpressed button.
- Provide icon-only controls in compact toolbars where a Switch would be too wide.
- Combine into a ToggleGroup for mutually exclusive selections like text alignment.
Switch between variants to see the visual difference live.
Pressed: False
Pick a size to see the toggle scale live.
Show icon
Show text
Pressed: False
Toggle the icon and text slots independently to compose your toggle content.
Keyboard Interactions
| Key | Action |
|---|---|
| Space | Toggles the pressed state. |
| Enter | Activates the toggle. |
| Tab | Moves focus to the next focusable element. |
API Reference
Toggle
Styling hooks (data-state)
A toggle exposes a data-state
of on or
off plus
data-disabled when disabled, so pressed
styling can be driven from CSS (e.g. data-[state=on]:bg-accent)
instead of conditional classes.
Related Components
- ToggleGroup — A set of toggles for selecting one or more formatting options.
- Button — Use when the action is one-shot rather than a persistent on/off state.
- Switch — A toggle for settings panels where the on/off metaphor is clearer.
- Checkbox — Use for multi-select form fields or items inside a list.