Skip to main content

ToggleButtonGroup

The ToggleButtonGroup component groups a set of ToggleButton components and manages their selection states.

Python Dash Example​

Below is an example of how to use the ToggleButtonGroup component in a Python Dash application.

import dash
from dash import html, callback, Output, Input
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.ToggleButtonGroup(
        id="format-toggle-group",
        children=[
          dmc.ToggleButton(value="Bold", children="Bold"),
          dmc.ToggleButton(value="Italic", children="Italic"),
          dmc.ToggleButton(value="Underline", children="Underline"),
        ]
      ),
      html.Div(id="toggle-group-output")
    ])
  ]
)

@callback(
    Output("toggle-group-output", "children"),
    Input("format-toggle-group", "value")
)
def update_output(selected_formats):
    if not selected_formats:
        return "No formatting selected"
    return f"Selected formats: {', '.join(selected_formats)}"

if __name__ == "__main__":
    app.run_server(debug=True)

Props Table​

Below are the props for the ToggleButtonGroup component:

PropTypeDefaultDescription
idstringNoneUnique identifier for the toggle button group.
valueanyNoneThe value of the selected toggle button(s).
exclusivebooleanfalseIf true, only allow one of the child buttons to be selected.
size'small' | 'medium' | 'large''medium'The size of the toggle button group.
orientation'horizontal' | 'vertical''horizontal'The orientation of the toggle button group.
fullWidthbooleanfalseIf true, the button group will take up the full width of its container.
disabledbooleanfalseIf true, the component is disabled.
color'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning''standard'The color of the buttons when selected.
sxobjectNoneThe system prop that allows defining custom styles.
childrenReactNodeNoneThe content of the component, normally ToggleButton components.

Usage Examples​

Multi-Selection​

The default behavior of ToggleButtonGroup allows multiple selections:

dmc.ToggleButtonGroup(
  value=["Bold", "Italic"],
  children=[
    dmc.ToggleButton(value="Bold", children="Bold"),
    dmc.ToggleButton(value="Italic", children="Italic"),
    dmc.ToggleButton(value="Underline", children="Underline"),
  ]
)

Exclusive Selection​

For single selection (radio button-like behavior), set the exclusive prop to true:

dmc.ToggleButtonGroup(
  exclusive=True,
  value="Left",
  children=[
    dmc.ToggleButton(value="Left", children="Left"),
    dmc.ToggleButton(value="Center", children="Center"),
    dmc.ToggleButton(value="Right", children="Right"),
  ]
)

Vertical Orientation​

Toggle buttons can be arranged vertically:

dmc.ToggleButtonGroup(
  orientation="vertical",
  exclusive=True,
  value="Option 1",
  children=[
    dmc.ToggleButton(value="Option 1", children="Option 1"),
    dmc.ToggleButton(value="Option 2", children="Option 2"),
    dmc.ToggleButton(value="Option 3", children="Option 3"),
  ]
)

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI ToggleButtonGroup Documentation