Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Getting Started

Tutorial

Reflex Deploy

Self Hosting

Library

/

Chakra

/

Forms

/

Numberinput

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 number_input_example():
    return rx.chakra.number_input(
        value=NumberInputState.number,
        on_change=NumberInputState.set_number,
    )

API Reference

NumberInput

The wrapper that provides context and logic to the components.

Prop	Type	Default Value	Values
`value`	Number
`allow_mouse_wheel`	bool
`clamped_value_on_blur`	bool
`default_value`	Number
`error_border_color`	str
`focus_border_color`	str
`focus_input_on_change`	bool
`is_disabled`	bool
`is_invalid`	bool
`is_read_only`	bool
`is_required`	bool
`is_valid_character`	str
`keep_within_range`	bool
`max_`	Number
`min_`	Number
`variant`	Literal
`size`	Literal
`name`	str

Event Triggers

Trigger	Description
`on_change`	Fired when the input value changes.

NumberInputField

The input field itself.

Props

No component specific props

Event Triggers

See the full list of default event triggers

NumberInputStepper

The wrapper for the input's stepper buttons.

Props

No component specific props

Event Triggers

See the full list of default event triggers

NumberIncrementStepper

The button to increment the value of the input.

Props

No component specific props

Event Triggers

See the full list of default event triggers

NumberDecrementStepper

The button to decrement the value of the input.

Props

No component specific props

Event Triggers

See the full list of default event triggers

Did you find this useful?

No

Yes

Home Gallery Changelog Introduction Hosting

NumberInput

API Reference

NumberInput

NumberInputField

NumberInputStepper

NumberIncrementStepper

NumberDecrementStepper