Skip to content

Multiselect Input

A user input component that allows users to select multiple values from a searchable list of options.

Fields

NameTypeDescriptionOptions
LabelText
OptionsKey-ValueKey-value object with options. Must be a JSON string or a state reference to a dictionary.
PlaceholderTextText to show when no options are selected.
Maximum countNumberThe maximum allowable number of selected options. Set to zero for unlimited.
AccentColorThe colour of the chips created for each selected option.
Chip textColorThe colour of the text in the chips.
SelectedColorThe colour of the highlighted item in the list.
Primary textColor
Secondary textColor
Container backgroundColor
SeparatorColor
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
ss-options-changeSent when the selected options change.
def onchange_handler(state, payload):

  # Set the state variable "selected" to the selected option

  state["selected"] = payload

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.MultiselectInput(content={
        "label": "", # str 
        "options": {}, # Union[Dict, str] 
        "placeholder": "", # str 
        "maximumCount": 0.0, # Union[float, str] 
        "accentColor": "", # str 
        "chipTextColor": "", # str 
        "selectedColor": "", # str 
        "primaryTextColor": "", # str 
        "secondaryTextColor": "", # str 
        "containerBackgroundColor": "", # str 
        "separatorColor": "", # str 
        "cssClasses": "", # str 
    },
    handlers={
        "ss-options-change": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference