express.ui.input_selectize

express.ui.input_selectize(
    id,
    label,
    choices,
    *,
    selected=None,
    multiple=False,
    width=None,
    remove_button=None,
    options=None,
)

Create a select list that can be used to choose a single or multiple items from a list of values.

Parameters

id : str: An input id.
label : TagChild: An input label.
choices : SelectChoicesArg: Either a list of choices or a dictionary mapping choice values to labels. Note that if a dictionary is provided, the keys are used as the (input) values so that the dictionary values can hold HTML labels. A dictionary of dictionaries is also supported, and in that case, the top-level keys are treated as <optgroup> labels.
selected : Optional[str | list[str]] = None: The values that should be initially selected, if any.
multiple : bool = False: Is selection of multiple items allowed?
width : Optional[str] = None: The CSS width, e.g. ‘400px’, or ‘100%’
remove_button : Optional[bool] = None: Whether to add a remove button. This uses the clear_button and remove_button selectize plugins which can also be supplied as options. By default it will apply a remove button to multiple selections, but not single selections.
options : Optional[dict[str, Jsonifiable | JSEval]] = None: A dictionary of options. See the documentation of selectize.js for possible options. If you want to pass a JavaScript function, wrap the string in ui.JS.

Returns

: Tag: A UI element.

Notes

Server value

If multiple=False, the server value is a string with the value of the selected item. If multiple=True, the server value is a tuple containing the values of the selected items. When multiple=True and nothing is selected, this value will be None.

Examples

#| standalone: true
#| components: [editor, viewer]
#| layout: vertical
#| viewerHeight: 400

## file: app.py
from html import escape  # noqa: F401

from shiny.express import input, render, ui

states = {
    "East Coast": {"NY": "New York", "NJ": "New Jersey", "CT": "Connecticut"},
    "West Coast": {"WA": "Washington", "OR": "Oregon", "CA": "California"},
    "Midwest": {"MN": "Minnesota", "WI": "Wisconsin", "IA": "Iowa"},
}

ui.input_selectize(
    "state",
    "Choose a state:",
    states,
    multiple=True,
)


@render.text
def value():
    return "You choose: " + str(input.state())


ui.input_selectize(
    "state2",
    "Selectize Options",
    states,
    multiple=True,
    options=(
        {
            "placeholder": "Enter text",
            "render": ui.js_eval(
                '{option: function(item, escape) {return "<div><strong>Select " + escape(item.label) + "</strong></div>";}}'
            ),
            "create": True,
        }
    ),
)
ui.input_selectize(
    "state3",
    "Selectize plugins",
    states,
    multiple=True,
    options={"plugins": ["clear_button"]},
)