Skip to content

Select Input

A user input component that allows users to select a single value 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.
AccentColor
Chip textColorThe color of the text in the chips.
SelectedColor
Primary textColor
Secondary textColor
Container backgroundColor
SeparatorColor
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
ss-option-changeSent when the selected option changes.
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.SelectInput(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-option-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