The Toggle Group component manages the state of multiple toggle buttons, allowing single or multiple selections.
Basic Usage
import reflex_ui as ui
from reflex_ui.components.base.toggle import toggle
ui.toggle_group(
toggle(ui.icon("AlignLeftIcon"), value="left"),
toggle(ui.icon("AlignCenterIcon"), value="center"),
toggle(ui.icon("AlignRightIcon"), value="right"),
)
Controlled State
class State(rx.State):
alignment: list[str] = ["left"]
def handle_change(self, values: list):
self.alignment = values
rx.toast(f"Selected: {', '.join(values)}")
ui.toggle_group(
toggle(ui.icon("AlignLeftIcon"), value="left"),
toggle(ui.icon("AlignCenterIcon"), value="center"),
toggle(ui.icon("AlignRightIcon"), value="right"),
value=State.alignment,
on_value_change=State.handle_change
)
Single Selection Mode
By default, only one toggle can be pressed at a time:
ui.toggle_group(
toggle(ui.icon("TextIcon"), value="text"),
toggle(ui.icon("ImageIcon"), value="image"),
toggle(ui.icon("VideoIcon"), value="video"),
multiple=False, # Default
default_value=["text"]
)
Multiple Selection Mode
Allow multiple toggles to be pressed simultaneously:
ui.toggle_group(
toggle(ui.icon("BoldIcon"), value="bold"),
toggle(ui.icon("ItalicIcon"), value="italic"),
toggle(ui.icon("UnderlineIcon"), value="underline"),
multiple=True,
default_value=["bold"]
)
Vertical Layout
ui.toggle_group(
toggle(ui.icon("ListIcon"), value="list"),
toggle(ui.icon("GridIcon"), value="grid"),
toggle(ui.icon("TableIcon"), value="table"),
orientation="vertical"
)
Text Formatting Toolbar
class State(rx.State):
formatting: list[str] = []
rx.hstack(
ui.toggle_group(
toggle(ui.icon("BoldIcon"), value="bold"),
toggle(ui.icon("ItalicIcon"), value="italic"),
toggle(ui.icon("UnderlineIcon"), value="underline"),
toggle(ui.icon("StrikethroughIcon"), value="strikethrough"),
value=State.formatting,
on_value_change=State.set_formatting,
multiple=True
),
rx.box(height="20px", width="1px", bg="gray.300"), # Divider
ui.toggle_group(
toggle(ui.icon("AlignLeftIcon"), value="left"),
toggle(ui.icon("AlignCenterIcon"), value="center"),
toggle(ui.icon("AlignRightIcon"), value="right"),
toggle(ui.icon("AlignJustifyIcon"), value="justify"),
default_value=["left"],
multiple=False
),
spacing="0.5rem"
)
Disabled State
ui.toggle_group(
toggle(ui.icon("PlayIcon"), value="play"),
toggle(ui.icon("PauseIcon"), value="pause"),
toggle(ui.icon("StopIcon"), value="stop"),
disabled=True
)
Props Reference
The controlled open state represented by an array of pressed toggle values
The uncontrolled initial values of pressed toggles
Callback fired when the pressed states change. Receives the array of currently pressed values.
When false, only one item in the group can be pressed. When true, multiple items can be pressed.
Whether the toggle group should ignore user interaction
Whether to loop keyboard focus back to the first item when the end is reached
orientation
Literal['horizontal', 'vertical']
default:"horizontal"
The component orientation (layout flow direction)
Additional CSS classes for styling
Keyboard Navigation
- Arrow Keys: Navigate between toggles
- Space/Enter: Toggle the focused item
- Tab: Move focus in/out of the group
Styling
From source code at reflex_ui/components/base/toggle_group.py:15-18:
- Container has background color and rounded corners
- Items are spaced with consistent gap
- Vertical orientation automatically adjusts layout
- Disabled state reduces opacity
Implementation Details
From source code at reflex_ui/components/base/toggle_group.py:32-66:
- Manages state for multiple toggle buttons
- Supports both single and multiple selection modes
- Automatic keyboard navigation with arrow keys
- Focus management with optional looping
- Each toggle needs a unique
value prop
- Values are stored in an array