Select components

Select comes in two flavours:

Select for a singular selection
SelectMultiple which allows for multiple selections

Select

Select a single value from a list of values.

@solara.value_component(None)
def Select(
    label: str,
    values: List[T],
    value: Union[None, T, solara.Reactive[T], solara.Reactive[Optional[T]]] = None,
    on_value: Union[None, Callable[[T], None], Callable[[Optional[T]], None]] = None,
    dense: bool = False,
    disabled: bool = False,
    classes: List[str] = [],
    style: Union[str, Dict[str, str], None] = None,
) -> reacton.core.ValueElement[v.Select, T]:

    ...

Basic example:

import solara

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


@solara.component
def Page():
    solara.Select(label="Food", value=food, values=foods)
    solara.Markdown(f"**Selected**: {food.value}")

Selected: Banana

Live output

Arguments

label: Label to display next to the select.
value: The currently selected value.
values: List of values to select from.
on_value: Callback to call when the value changes.
dense: Whether to use a denser style.
disabled: Whether the select widget allow user interaction
classes: List of CSS classes to apply to the select.
style: CSS style to apply to the select.

SelectMultiple

Select multiple values from a list of values.

@solara.value_component(None)
def SelectMultiple(
    label: str,
    values: List[T],
    all_values: List[T],
    on_value: Callable[[List[T]], None] = None,
    dense: bool = False,
    disabled: bool = False,
    classes: List[str] = [],
    style: Union[str, Dict[str, str], None] = None,
) -> reacton.core.ValueElement[v.Select, 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():
    solara.SelectMultiple("Languages", languages, all_languages)
    solara.Markdown(f"**Selected**: {languages.value}")

Selected: ['Python']

Live output

Arguments

label: Label to display next to the select.
values: List of currently selected values.
all_values: List of all values to select from.
on_value: Callback to call when the value changes.
dense: Whether to use a denser style.
disabled: Whether the select widget allow user interaction
classes: List of CSS classes to apply to the select.
style: CSS style to apply to the select.