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 basic_pininput_example():
    return rx.chakra.vstack(
        rx.chakra.heading(PinInputState.pin),
        rx.chakra.box(
            rx.chakra.pin_input(
                length=4,
                on_change=PinInputState.set_pin,
                mask=True,
            ),
        ),
    )

The PinInput component can also be customized as seen below.

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

API Reference

PinInput

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

Prop	Type	Default Value	Values
`value`	str
`auto_focus`	bool
`default_value`	str
`error_border_color`	str
`focus_border_color`	str
`id_`	str
`length`	int
`is_disabled`	bool
`is_invalid`	bool
`manage_focus`	bool
`mask`	bool
`placeholder`	str
`type_`	str
`variant`	Literal
`name`	str

Event Triggers

Trigger	Description
`on_change`	Fired when the pin input is changed.
`on_complete`	Fired when the pin input is completed.

Did you find this useful?

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

PinInput

API Reference

PinInput