Select

The Select component allows users to choose a single or multiple options from a dropdown list. Below are examples of how to use it in Python Dash.

---

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.Select(
                id="select",
                label="Choose an option",
                options=[
                    {"label": "Option 1", "value": "option1"},
                    {"label": "Option 2", "value": "option2"},
                    {"label": "Option 3", "value": "option3"}
                ],
                value="option1"
                multiple
            ),
            html.Div(id="output")
        ]),

        # Multiple Select with Checkmarks
        html.Div([
            dmc.Select(
                id="multi-select",
                label="Select multiple options",
                options=[
                    {"label": "Option 1", "value": "option1"},
                    {"label": "Option 2", "value": "option2"},
                    {"label": "Option 3", "value": "option3"}
                ],
                multiple=True,
                withCheckmarks=True,
                value=["option1", "option2"]
            ),
            html.Div(id="output")
        ])
    ]
)

@app.callback(
    dash.Output("output", "children"),
    dash.Input("select", "value")
)
def update_output(value):
    return f"You selected: {value}"

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

---

Props Table

Below are the main props available for the Select component.

Prop	Type	Default	Description
id	string	null	Unique ID for Dash callbacks.
label	string	null	Label displayed above the select dropdown.
options	array of {label: string, value: any}	null	Options available in the dropdown list.
value	any	null	The current value of the select dropdown.
onChange	function	null	Callback triggered when the selected value changes.
withCheckmarks	boolean	false	Displays checkmarks for each item of the Select dropdown. Only work in conjunction with multiple.
multiple	boolean	false	Displays checkmarks for each item of the Select dropdown

---

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

MUI Select Documentation