Skip to main content
The Toggle component is a two-state button that can be toggled between pressed and unpressed states. It’s useful for enabling/disabling features or selecting options.

​
Basic Usage

import reflex_ui as ui

ui.toggle(
    ui.icon("BoldIcon")
)

​
Controlled State

class State(rx.State):
    is_pressed: bool = False

ui.toggle(
    ui.icon("BoldIcon"),
    pressed=State.is_pressed,
    on_pressed_change=State.set_is_pressed
)

​
With Label

rx.hstack(
    ui.toggle(
        ui.icon("BellIcon")
    ),
    rx.text("Notifications"),
    spacing="0.5rem"
)

​
Multiple Toggles

class State(rx.State):
    bold: bool = False
    italic: bool = False
    underline: bool = False

rx.hstack(
    ui.toggle(
        ui.icon("BoldIcon"),
        pressed=State.bold,
        on_pressed_change=State.set_bold
    ),
    ui.toggle(
        ui.icon("ItalicIcon"),
        pressed=State.italic,
        on_pressed_change=State.set_italic
    ),
    ui.toggle(
        ui.icon("UnderlineIcon"),
        pressed=State.underline,
        on_pressed_change=State.set_underline
    ),
    spacing="0.5rem"
)

​
With Tooltip

ui.tooltip(
    ui.toggle(
        ui.icon("StarIcon")
    ),
    content="Toggle favorite"
)

​
Disabled State

ui.toggle(
    ui.icon("LockIcon"),
    disabled=True
)

​
Props Reference

​
pressed
bool
Whether the toggle button is currently pressed (controlled)
​
default_pressed
bool
default:"False"
Whether the toggle button is initially pressed (uncontrolled)
​
on_pressed_change
EventHandler
Callback fired when the pressed state changes. Receives the new pressed state as a boolean.
​
value
str
A unique string that identifies the toggle when used inside a toggle group
​
disabled
bool
default:"False"
Whether the component should ignore user interaction
​
class_name
str
Additional CSS classes for styling

​
Visual States

The toggle has distinct visual states:
  • Default: Secondary color with hover effect
  • Pressed: Darker background and text color
  • Hover: Light background highlight
  • Active: Slightly darker than hover
  • Disabled: Reduced opacity with not-allowed cursor

​
Styling

From source code at reflex_ui/components/base/toggle.py:11-14:
  • Size: 8 units (2rem) square
  • Border radius: Small rounded corners
  • Colors: Secondary scale with contrast for pressed state
  • Transitions: Smooth color changes
  • Focus: Visible focus ring on keyboard navigation

​
Toggle Groups

For multiple related toggles, use the Toggle Group component which manages the state of multiple toggles together.

​
Implementation Details

From source code at reflex_ui/components/base/toggle.py:28-62:
  • Built on accessible button primitives
  • Supports both controlled and uncontrolled modes
  • Automatic keyboard navigation (Space/Enter)
  • ARIA attributes for accessibility
  • Can be used standalone or within toggle groups

Build docs developers (and LLMs) love

Get started for freeTalk to us