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.
step Union[int,float]
dynamic		 1

The amount by which the value is incremented or decremented when the user clicks one of the arrow buttons.
step_multiplier Union[int,float]
dynamic		 10

A factor that multiplies step when the user presses the Shift key while clicking one of the arrow buttons.
min Union[int,float]
dynamic

The minimum value to accept for this input.
max Union[int,float]
dynamic

The maximum value to accept for this input.
change_delay int App config

Minimum interval between two consecutive 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 Union[str, Callable]

A function or the name of a function that is triggered when a specific key is pressed.
This function is invoked with the following parameters:

  • state (State): the state instance.
  • id (str): the identifier of the control if it has one.
  • 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.
width Union[str,int] None

The width of the element.
on_change Union[str, Callable]

A function or the name of a function that is triggered when the value is updated.
This function is invoked with the following parameters:

  • 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 by the propagate configuration option.
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 is 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 are associated with the generated HTML Element.
These class names are added to the default taipy-number class name.
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.

Usage

Simple

See the entire code for this example

The number control provides a dedicated field for entering numerical values. It includes up and down arrows, allowing users to adjust the value easily without needing to type.

Let’s say you have a numerical variable that you want users to modify: 

value = 50

You can bind this variable to a number control with the following definition: definition:

Definition

<|{value}|number|>

<taipy:number>{value}</taipy:number>

import taipy.gui.builder as tgb
...
tgb.number("{value}")

Below is an example of how the control would appear on the page:

A 'number' control

Specifying boundaries

See the entire code for this example

You can restrict the range of valid inputs by setting the min and max properties for the number control.

Using the same variable from the previous example, here’s how you can define a number control that limits the values between 10 and 60:

Definition

<|{value}|number|min=10|max=60|>

<taipy:number min="10" max="60">{value}</taipy:number>

import taipy.gui.builder as tgb
...
tgb.number("{value}", min=10, max=60)

While the visual appearance of the control remains the same, users will only be able to input values within the specified range.

Setting the increment step

See the entire code for this example

You can define how much the value changes when the up or down arrows are pressed by setting the step property.

Using the same variable from the previous example, here’s how you can define a number control where the value increases or decreases by 2:

Definition

<|{value}|number|step=2|>

<taipy:number step="2">{value}</taipy:number>

import taipy.gui.builder as tgb
...
tgb.number("{value}", step=2)

Although the appearance of the control remains unchanged, pressing the up or down arrow will now increment or decrement the value by 2.

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.