Skip to content

Number Input

A user input component that allows users to enter numeric values.

Fields

NameTypeDescriptionOptions
LabelText
PlaceholderText
Minimum valueNumber
Max valueNumber
StepNumber
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
ss-number-changeCapture changes as they happen.

def onchange_handler(state, payload):

  # Set the state variable "new_val" to the new value

  state["new_val"] = payload
ss-number-change-finishCapture changes once this control has lost focus.

def onchange_handler(state, payload):

  # Set the state variable "new_val" to the new value

  state["new_val"] = payload

Low code usage

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

python
ui.NumberInput(content={
        "label": "", # str 
        "placeholder": "", # str 
        "minValue": 0.0, # Union[float, str] 
        "maxValue": 0.0, # Union[float, str] 
        "valueStep": 0.0, # Union[float, str] 
        "cssClasses": "", # str 
    },
    handlers={
        "ss-number-change": handle_event,
        "ss-number-change-finish": 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