Reflex | NumberInput

✨ Announcing our seed funding led by Lux Capital! Read more about it on our blog ✨

Docs Blog Changelog

Search documentation...

Star

12k+

[ Learn ]

Getting Started

Tutorial

[ Concepts ]

[ Reference ]

NumberInput

The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.

class NumberInputState(rx.State):
    number: int


def index():
    return rx.number_input(
        on_change=NumberInputState.set_number,
    )

NumberInput

The wrapper that provides context and logic to the components.

Props

Prop	Type	Description
`value`	Number	State var to bind the input.
`allow_mouse_wheel`	bool	If true, the input's value will change based on mouse wheel.
`clamped_value_on_blur`	bool	This controls the value update when you blur out of the input. - If true and the value is greater than max, the value will be reset to max - Else, the value remains the same.
`default_value`	Number	The initial value of the counter. Should be less than max and greater than min
`error_border_color`	str	The border color when the input is invalid.
`focus_border_color`	str	The border color when the input is focused.
`focus_input_on_change`	bool	If true, the input will be focused as you increment or decrement the value with the stepper
`input_mode`	str	Hints at the type of data that might be entered by the user. It also determines the type of keyboard shown to the user on mobile devices ("text" \| "search" \| "none" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal")
`is_disabled`	bool	Whether the input should be disabled.
`is_invalid`	bool	If true, the input will have `aria-invalid` set to true
`is_read_only`	bool	If true, the input will be in readonly mode
`is_required`	bool	Whether the input is required
`is_valid_character`	str	Whether the pressed key should be allowed in the input. The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+-.]$/
`keep_within_range`	bool	This controls the value update behavior in general. - If true and you use the stepper or up/down arrow keys, the value will not exceed the max or go lower than min - If false, the value will be allowed to go out of range.
`max_`	Number	The maximum value of the counter
`min_`	Number	The minimum value of the counter
`variant`	str	"outline" \| "filled" \| "flushed" \| "unstyled"

Event Triggers

NumberInputField

The input field itself.

No props for NumberInputField.

Base Event Triggers

NumberInputStepper

The wrapper for the input's stepper buttons.

No props for NumberInputStepper.

Base Event Triggers

NumberIncrementStepper

The button to increment the value of the input.

No props for NumberIncrementStepper.

Base Event Triggers

NumberDecrementStepper

The button to decrement the value of the input.

No props for NumberDecrementStepper.

Base Event Triggers

← Input PinInput →

.css-1ibpn7w{color:#DACEEE;}[ Learn ]

[ Concepts ]

[ Reference ]

NumberInput

NumberInput

Props

Event Triggers

Base Event Triggers

Component Specific Triggers

NumberInputField

No props for NumberInputField.

Base Event Triggers

NumberInputStepper

No props for NumberInputStepper.

Base Event Triggers

NumberIncrementStepper

No props for NumberIncrementStepper.

Base Event Triggers

NumberDecrementStepper

No props for NumberDecrementStepper.

Base Event Triggers

[ Learn ]