MultiSelect

The MultiSelect component allows users to select multiple options from a list, providing a versatile solution for complex forms.

import dash
from dash import html
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.MultiSelect(
                id="multi-select",
                label="Choose options",
                options=[
                    {"value": "option1", "label": "Option 1"},
                    {"value": "option2", "label": "Option 2"},
                    {"value": "option3", "label": "Option 3"},
                ],
                selectedValues=["option1"]
            ),
            html.Div(id="output")
        ])
    ]
)

@app.callback(
    dash.Output("output", "children"),
    dash.Input("multi-select", "selectedValues")
)
def update_output(selected_values):
    return f"Selected values: {', '.join(selected_values)}"

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

Props Table

Below are the main props available for the MultiSelect component:

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
label	string	null	Label for the MultiSelect component.
options	Array	[]	List of options to display.
selectedValues	string[]	[]	Selected values as an array.
onChange	function	null	Callback triggered when the selection changes.
searchText	string	null	Text input for searching options.
slotProps	string	null	The props used for each slot inside.
limitTags	number	-1	The maximum number of tags that will be visible when not focused. Set -1 to disable the limit.

Props Table​

Props Table