Skip to content

number

A kind of input that handles numbers.

Properties

Name Type Default Description
value(★) any
dynamic

The numerical value represented by this control.

label str None

The label associated with the input.

change_delay int App config

Minimum time between triggering two calls to the on_change callback.
The default value is defined at the application configuration level by the change_delay configuration option. if None, the delay is set to 300 ms.
If set to -1, the input change is triggered only when the user presses the Enter key.

on_action Callback

Name of a function that is triggered when a specific key is pressed.
The parameters of that function are all optional:

  • state (State): the state instance.
  • id (str): the identifier of the input.
  • payload (dict): the details on this callback's invocation.
    This dictionary has the following keys:
    • action: the name of the action that triggered this callback.
    • args (list):
      • key name
      • variable name
      • current value

action_keys str "Enter"

Semicolon (';')-separated list of supported key names.
Authorized values are Enter, Escape, F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12.

on_change Callback

The name of a function that is triggered when the value is updated.
The parameters of that function are all optional:

  • state (State): the state instance.
  • var_name (str): the variable name.
  • value (any): the new value.

propagate bool App config

Allows the control's main value to be automatically propagated.
The default value is defined at the application configuration level.
If True, any change to the control's value is immediately reflected in the bound application variable.

active bool
dynamic
True

Indicates if this component is active.
An inactive component allows no user interaction.

id str

The identifier that will be assigned to the rendered HTML component.

properties dict[str, any]

Bound to a dictionary that contains additional properties for this element.

class_name str
dynamic

The list of CSS class names that will be associated with the generated HTML Element.
These class names will be added to the default taipy-<element_type>.

hover_text str
dynamic

The information that is displayed when the user hovers over this element.

(★)value is the default property for this visual element.

Styling

All the number controls are generated with the "taipy-number" CSS class. You can use this class name to select the number controls on your page and apply style.

Stylekit support

The Stylekit provides a specific class that you can use to style number controls:

  • fullwidth
    If a number control uses the fullwidth class, then it uses the whole available horizontal space.

Usage

Simple

You can create a number input field bound to a numerical variable with the following content:

Definition

<|{value}|number|>
<taipy:number>{value}</taipy:number>
import taipy.gui.builder as tgb
...
tgb.number("{value}")