Toolbar Select

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| viewerHeight: 200

from faicons import icon_svg
from shiny.express import input, render, ui

with ui.card(full_screen=True):
    with ui.card_header():
        "Data View"
        with ui.toolbar(align="right"):
            ui.toolbar_input_select(
                id="view_mode",
                label="View Mode",
                choices=["Table", "Chart", "Map"],
                icon=icon_svg("eye"),
                show_label=True,
            )
            ui.toolbar_input_select(
                id="filter",
                label="Filter",
                choices=["All", "Active", "Archived"],
                icon=icon_svg("filter"),
            )

    @render.text
    def selected_view():
        return f"View Mode: {input.view_mode()}, Filter: {input.filter()}"
from faicons import icon_svg
from shiny.express import input, render, ui

with ui.card(full_screen=True):
    with ui.card_header():
        "Data View"
        with ui.toolbar(align="right"):
            ui.toolbar_input_select(
                id="view_mode",
                label="View Mode",
                choices=["Table", "Chart", "Map"],
                icon=icon_svg("eye"),
                show_label=True,
            )
            ui.toolbar_input_select(
                id="filter",
                label="Filter",
                choices=["All", "Active", "Archived"],
                icon=icon_svg("filter"),
            )

    @render.text
    def selected_view():
        return f"View Mode: {input.view_mode()}, Filter: {input.filter()}"
from faicons import icon_svg
from shiny import App, render, ui

app_ui = ui.page_fixed(
    ui.card(
        ui.card_header(
            "Data View",
            ui.toolbar(
                ui.toolbar_input_select(
                    id="view_mode",
                    label="View Mode",
                    choices=["Table", "Chart", "Map"],
                    icon=icon_svg("eye"),
                    show_label=True,
                ),
                ui.toolbar_input_select(
                    id="filter",
                    label="Filter",
                    choices=["All", "Active", "Archived"],
                    icon=icon_svg("filter"),
                ),
                align="right",
            ),
        ),
        ui.card_body(
            ui.output_text("selected_view"),
        ),
        full_screen=True,
    )
)

def server(input, output, session):
    @render.text
    def selected_view():
        return f"View Mode: {input.view_mode()}, Filter: {input.filter()}"

app = App(app_ui, server)
No matching items

Relevant Functions

  • ui.toolbar_input_select
    ui.toolbar_input_select(id, label, choices, *, selected=None, icon=None, show_label=False, tooltip=MISSING, **kwargs)

  • ui.update_toolbar_input_select
    ui.update_toolbar_input_select(id, *, label=None, show_label=None, choices=None, selected=None, icon=None, session=None)

  • ui.toolbar
    ui.toolbar(*args, align="right", gap=None, width=None)

No matching items

Details

A toolbar select is a compact select input designed for use in toolbars within card headers, footers, and other constrained spaces.

To add a toolbar select to your app:

  1. Add ui.toolbar() to create a toolbar container, typically within ui.card_header() or another compact location.
  2. Inside the toolbar, add ui.toolbar_input_select() with an id, label, and choices.
  3. Optionally set selected to specify which choice is initially selected (defaults to the first choice if not specified).
  4. Optionally add an icon parameter. When an icon is provided without show_label=True, only the icon is visible and a tooltip with the label text appears on hover.

The value of a toolbar select is accessible as a reactive value. To access the value:

  1. Use input.<select_id>() (e.g., input.view_mode()) to access the currently selected value.

Select appearance

Toolbar selects are designed to be minimal and space-efficient. By default:

  • The label is visually hidden but available to screen readers
  • Use show_label=True to make the label visible
  • An optional icon can be displayed alongside the select dropdown
  • A tooltip with the label text appears on hover when the label is hidden

Choices

The choices parameter accepts:

  • A list of strings: ["Option 1", "Option 2", "Option 3"]
  • A dictionary mapping values to labels: {"val1": "Option 1", "val2": "Option 2"}
  • A nested dictionary for grouped choices (optgroups): {"Group 1": {"val1": "Option 1"}, "Group 2": {"val2": "Option 2"}}

Use selected to set the initially selected value. If not specified, the first choice is selected by default.

Updating selects

Use ui.update_toolbar_input_select() to change the select’s appearance and options:

  • Update the label, icon, choices, selected value, or show_label state
  • You cannot add/remove a tooltip after creation
  • Use ui.update_tooltip() to update tooltip text

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| components: [viewer]
#| viewerHeight: 400

from faicons import icon_svg
from shiny import App, reactive, render, ui

app_ui = ui.page_fluid(
    ui.card(
        ui.card_header(
            "Data Dashboard",
            ui.toolbar(
                ui.toolbar_input_select(
                    id="view_mode",
                    label="View Mode",
                    choices=["Table", "Chart", "Map"],
                    icon=icon_svg("eye"),
                ),
                align="right",
            ),
        ),
        ui.card_body(
            ui.input_action_button("add_option", "Add 'Grid' Option"),
            ui.input_action_button("change_selection", "Select Chart"),
            ui.input_action_button("toggle_label", "Toggle Show Label"),
            ui.output_text("selected_view"),
        ),
        full_screen=True,
    ),
    {"class": "vh-100 d-flex justify-content-center align-items-center px-4"},
)

def server(input, output, session):
    @reactive.effect
    @reactive.event(input.add_option)
    def _():
        # Add a new choice to the select
        ui.update_toolbar_input_select(
            "view_mode",
            choices=["Table", "Chart", "Map", "Grid"],
            label="View Mode (Updated)",
        )

    @reactive.effect
    @reactive.event(input.change_selection)
    def _():
        # Change the selected value
        ui.update_toolbar_input_select(
            "view_mode",
            selected="Chart",
        )

    @reactive.effect
    @reactive.event(input.toggle_label)
    def _():
        # Toggle show_label to display both icon and label
        current_click = input.toggle_label()
        ui.update_toolbar_input_select(
            "view_mode",
            show_label=current_click % 2 == 1,
        )

    @render.text
    def selected_view():
        return f"Currently viewing: {input.view_mode()}"

app = App(app_ui, server)
from faicons import icon_svg
from shiny import reactive
from shiny.express import input, render, ui

with ui.card(full_screen=True):
    with ui.card_header():
        "Data Dashboard"
        with ui.toolbar(align="right"):
            ui.toolbar_input_select(
                id="view_mode",
                label="View Mode",
                choices=["Table", "Chart", "Map"],
                icon=icon_svg("eye"),
            )

    ui.input_action_button("add_option", "Add 'Grid' Option")
    ui.input_action_button("change_selection", "Select Chart")
    ui.input_action_button("toggle_label", "Toggle Show Label")

    @render.text
    def selected_view():
        return f"Currently viewing: {input.view_mode()}"

@reactive.effect
@reactive.event(input.add_option)
def _():
    # Add a new choice to the select
    ui.update_toolbar_input_select(
        "view_mode",
        choices=["Table", "Chart", "Map", "Grid"],
        label="View Mode (Updated)",
    )

@reactive.effect
@reactive.event(input.change_selection)
def _():
    # Change the selected value
    ui.update_toolbar_input_select(
        "view_mode",
        selected="Chart",
    )

@reactive.effect
@reactive.event(input.toggle_label)
def _():
    # Toggle show_label to display both icon and label
    current_click = input.toggle_label()
    ui.update_toolbar_input_select(
        "view_mode",
        show_label=current_click % 2 == 1,
    )
from faicons import icon_svg
from shiny import App, reactive, render, ui

app_ui = ui.page_fixed(
    ui.card(
        ui.card_header(
            "Data Dashboard",
            ui.toolbar(
                ui.toolbar_input_select(
                    id="view_mode",
                    label="View Mode",
                    choices=["Table", "Chart", "Map"],
                    icon=icon_svg("eye"),
                ),
                align="right",
            ),
        ),
        ui.card_body(
            ui.input_action_button("add_option", "Add 'Grid' Option"),
            ui.input_action_button("change_selection", "Select Chart"),
            ui.input_action_button("toggle_label", "Toggle Show Label"),
            ui.output_text("selected_view"),
        ),
        full_screen=True,
    )
)

def server(input, output, session):
    @reactive.effect
    @reactive.event(input.add_option)
    def _():
        # Add a new choice to the select
        ui.update_toolbar_input_select(
            "view_mode",
            choices=["Table", "Chart", "Map", "Grid"],
            label="View Mode (Updated)",
        )

    @reactive.effect
    @reactive.event(input.change_selection)
    def _():
        # Change the selected value
        ui.update_toolbar_input_select(
            "view_mode",
            selected="Chart",
        )

    @reactive.effect
    @reactive.event(input.toggle_label)
    def _():
        # Toggle show_label to display both icon and label
        current_click = input.toggle_label()
        ui.update_toolbar_input_select(
            "view_mode",
            show_label=current_click % 2 == 1,
        )

    @render.text
    def selected_view():
        return f"Currently viewing: {input.view_mode()}"

app = App(app_ui, server)
No matching items

Accessibility

Always provide a meaningful label even when using show_label=False. The label is used for screen readers and tooltips, ensuring your app is accessible to all users.

See Also: Toolbar | Select