Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Forms

/

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,
    )

The wrapper that provides context and logic to the components.

PropTypeDescriptionValues
valueNumber

State var to bind the input.

allow_mouse_wheelbool

If true, the input's value will change based on mouse wheel.

clamped_value_on_blurbool

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_valueNumber

The initial value of the counter. Should be less than max and greater than min

error_border_colorstr

The border color when the input is invalid.

focus_border_colorstr

The border color when the input is focused.

focus_input_on_changebool

If true, the input will be focused as you increment or decrement the value with the stepper

is_disabledbool

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") input_mode: Var[LiteralInputNumberMode] Whether the input should be disabled.

is_invalidbool

If true, the input will have aria-invalid set to true

is_read_onlybool

If true, the input will be in readonly mode

is_requiredbool

Whether the input is required

is_valid_characterstr

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_rangebool

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

variantLiteral

"outline" | "filled" | "flushed" | "unstyled"

sizeLiteral

"lg" | "md" | "sm" | "xs"

namestr

The name of the form field

Event Triggers

TriggerDescription
on_change

Fired when the input value changes.

The input field itself.

Props

No component specific props

The wrapper for the input's stepper buttons.

Props

No component specific props

The button to increment the value of the input.

Props

No component specific props

The button to decrement the value of the input.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting