Documentation/Components/Input/ToggleButtons

ToggleButtons

ToggleButtons are in two flavours, for single, and for multiple selections.

ToggleButtonsSingle

ToggleButtons for selecting a single value.

@solara.value_component(None)
def ToggleButtonsSingle(
    value: Union[None, T, Optional[T], solara.Reactive[T], solara.Reactive[Optional[T]]] = None,
    values: List[T] = [],
    children: List[reacton.core.Element] = [],
    on_value: Optional[Callable[[T], None]] = None,
    dense: bool = False,
    mandatory: bool = True,
    classes: List[str] = [],
    style: Union[str, Dict[str, str], None] = None,
) -> reacton.core.ValueElement[v.BtnToggle, T]:

    ...

import solara

foods = ["Kiwi", "Banana", "Apple"]
food = solara.reactive("Banana")


@solara.component
def Page():
    with solara.Card("My favorite food"):
        solara.ToggleButtonsSingle(value=food, values=foods)
        solara.Markdown(f"**Selected**: {food.value}")

My favorite food

Selected: Banana

Live output

Using Buttons

Instead of passing the values as a list, we can also use the buttons as children. This allows us to customize the buttons, for example to add an icon.

import solara

direction = solara.reactive("left")


@solara.component
def Page():
    with solara.Card("Pick a direction"):
        # instead of using the values argument, we can use the buttons as children
        # the label of the button will be used as value, if no value is given.
        with solara.ToggleButtonsSingle(value=direction):
            # note that the label and the value are different
            solara.Button("Up", icon_name="mdi-arrow-up-bold", value="up", text=True)
            solara.Button("Down", icon_name="mdi-arrow-down-bold", value="down", text=True)
            solara.Button("Left", icon_name="mdi-arrow-left-bold", value="left", text=True)
            solara.Button("Right", icon_name="mdi-arrow-right-bold", value="right", text=True)
        solara.Markdown(f"**Selected**: {direction.value}")

Pick a direction

Selected: left

Live output

Arguments

value: The currently selected value.
values: List of values to select from.
children: List of buttons to use as values.
on_value: Callback to call when the value changes.
dense: Whether to use a dense (smaller) style.
mandatory: Whether a choice is mandatory.
style: CSS style to apply to the top level element.
classes: List of CSS classes to be applied to the top level element.

ToggleButtonsMultiple

ToggleButtons for selecting multiple values.

@solara.value_component(None)
def ToggleButtonsMultiple(
    value: Union[List[T], solara.Reactive[List[T]]] = [],
    values: List[T] = [],
    children: List[reacton.core.Element] = [],
    on_value: Union[Callable[[List[T]], None], None] = None,
    dense: bool = False,
    mandatory: bool = False,
    classes: List[str] = [],
    style: Union[str, Dict[str, str], None] = None,
) -> reacton.core.ValueElement[v.BtnToggle, List[T]]:

    ...

Basic example:

import solara

all_languages = "Python C++ Java JavaScript TypeScript BASIC".split()
languages = solara.reactive([all_languages[0]])


@solara.component
def Page():
    with solara.Card("My favorite programming languages"):
        solara.ToggleButtonsMultiple(languages, all_languages)
        solara.Markdown(f"**Selected**: {languages.value}")

My favorite programming languages

Selected: ['Python']

Live output

Arguments

value: The currently selected values.
values: List of values to select from.
children: List of buttons to use as values.
on_value: Callback to call when the value changes.
dense: Whether to use a dense (smaller) style.
mandatory: Whether selecting at least one element is mandatory.
style: CSS style to apply to the top level element.
classes: List of CSS classes to be applied to the top level element.

ToggleButtonsMultiple

Basic example:

Arguments