Reflex | PinInput

✨ 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 ]

PinInput

The PinInput component is similar to the Input component, but it is optimized for entering sequences of digits.

class PinInputState(rx.State):
    pin: str


def index():
    return rx.vstack(
        rx.heading(PinInputState.pin),
        rx.box(
            rx.pin_input(
                length=4,
                on_change=PinInputState.set_pin,
                mask=True,
            ),
        ),
    )

The PinInput component can also be customized as seen below.

class PinInputState(rx.State):
    pin: str


def index():
    return rx.center(
        rx.pin_input(
            rx.pin_input_field(color="red"),
            rx.pin_input_field(border_color="green"),
            rx.pin_input_field(shadow="md"),
            rx.pin_input_field(color="blue"),
            rx.pin_input_field(border_radius="md"),
            on_change=PinInputState.set_pin,
        )
    )

PinInput

The component that provides context to all the pin-input fields.

Props

Prop	Type	Description
`value`	str	State var to bind the the input.
`auto_focus`	bool	If true, the pin input receives focus on mount
`default_value`	str	The default value of the pin input
`error_border_color`	str	The border color when the input is invalid.
`focus_border_color`	str	The border color when the input is focused.
`id_`	str	The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id.
`length`	int	The length of the number input.
`is_disabled`	bool	If true, the pin input component is put in the disabled state
`is_invalid`	bool	If true, the pin input component is put in the invalid state
`manage_focus`	bool	If true, focus will move automatically to the next input once filled
`mask`	bool	If true, the input's value will be masked just like `type=password`
`placeholder`	str	The placeholder for the pin input
`type_`	str	The type of values the pin-input should allow ("number" \| "alphanumeric").
`variant`	str	"outline" \| "flushed" \| "filled" \| "unstyled"

Event Triggers

← NumberInput RadioGroup →

[ Learn ]

[ Concepts ]

[ Reference ]

PinInput

PinInput

Props

Event Triggers

Base Event Triggers

Component Specific Triggers

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

[ Concepts ]

[ Reference ]

PinInput

PinInput

Props

Event Triggers

Base Event Triggers

Component Specific Triggers

[ Learn ]