Component | Number Input

Render a number input box.

Node.js

ui.numberInput("number-input-key", { 
    label: "Enter your age",
    onEnter: (value) => console.log(value)
})

Python

ui.number_input(
    "number-input-key",
    label="Enter your age",
    on_enter=lambda value: print(value)
)

node

This component is a light wrapper on top of ui.textInput that is limited to number inputs.

python

This component is a light wrapper on top of ui.text_input that is limited to number inputs.

Learn more about working with inputs.

API reference

Function signature

Node.js

ui.numberInput(
    id: string,
    properties?: Partial<{
        label: string,
        description: string,
        required: boolean,
        initialValue: number | null,
        validate: (value: number | null) => string | void,
        onEnter: (value: number | null) => void,
        style: Style
    }>
)

Python

ui.number_input(
    id: str,
    *,
    label: str | None = None,
    description: str | None = None,
    required: bool = True,
    initial_value: int | float | None = None,
    validate: Callable[[int | float | None], str | None] | None = None,
    on_enter: Callable[[int | float | None], None] | None = None,
    style: Style | None = None
)

Parameters

Node.js

id

required string

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

Python

id

required str

A unique identifier for the component. This is necessary so that Compose can properly pass user actions back to the component.

---

Node.js

properties.label

optional string

The label to display above the number input. If not provided, the label will be inferred from the id.

Python

label

optional str

The label to display above the number input. If not provided, the label will be inferred from the id.

---

Node.js

properties.description

optional string

A description to display between the label and number input box.

Python

description

optional str

A description to display between the label and number input box.

---

Node.js

properties.required

optional boolean

Validate that the number input is not empty before submitting the form it's part of or calling it's onEnter hook. Defaults to true.

Python

required

optional bool

Validate that the number input is not empty before submitting the form it's part of or calling it's on_enter hook. Defaults to True.

---

Node.js

properties.initialValue

optional number | null

The initial value of the number input. Defaults to null. You can also update the value of the number input at any time using the page.setInputs() method.

Python

initial_value

optional int | float | None

The initial value of the number input. Defaults to None. You can also update the value of the number input at any time using the page.set_inputs() method.

---

Node.js

properties.validate

optional (value: number | null) => string | void

Validate the number input value before submitting it. If the function returns a string, it will be displayed as an error message.

Python

validate

optional Callable[[int | float | None], str | None]

Validate the number input value before submitting it. If the function returns a string, it will be displayed as an error message.

---

Node.js

properties.onEnter

optional (value: number | null) => void

A callback function that is called when the user presses enter in the number input.

Python

on_enter

optional Callable[[int | float | None], None]

A callback function that is called when the user presses enter in the number input.

---

Node.js

properties.style

optional Style

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

Python

style

optional Style | None

Directly style the underlying element using CSS. See the styling guide for more details on available style properties.

---