# Toggle

Source: https://lumeo.nativ.sh/components/toggle

# Toggle

A two-state button that can be either on or off.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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.

Preview Code

Default

Preview Code

Variants

Preview Code

Sizes

Preview Code

With Text

Bold Italic Underline

Preview Code

Disabled

Preview Code

Variant — interactive preview

Switch between variants to see the visual difference live.

Default Outline

Bold

Pressed: False

Preview Code

Size — interactive preview

Pick a size to see the toggle scale live.

Sm Default Lg

Default

Preview Code

Icon + Text slots — interactive preview

Show icon

Show text

Bold

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

Property

Type

Default

Description

Pressed

bool

false

Whether the toggle is in a pressed/active state. Use with @bind-Pressed for two-way binding.

PressedChanged

EventCallback<bool>

—

Callback invoked when the pressed state changes.

Variant

ToggleVariant

Default

Visual style. Values: Default, Outline.

Size

ToggleSize

Default

Size of the toggle button. Values: Default, Sm, Lg.

Disabled

bool

false

When true, prevents interaction and dims the toggle.

ChildContent

RenderFragment?

null

Content rendered inside the toggle button (icon, text, or both).

AriaLabel

string?

null

Accessible label announced by screen readers for icon-only toggles.

## Related Components

-   [ToggleGroup](/components/toggle-group) — A set of toggles for selecting one or more formatting options.
-   [Button](/components/button) — Use when the action is one-shot rather than a persistent on/off state.
-   [Switch](/components/switch) — A toggle for settings panels where the on/off metaphor is clearer.
-   [Checkbox](/components/checkbox) — Use for multi-select form fields or items inside a list.