Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Chakra

/

Forms

/

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

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

PropTypeDescriptionValues
valuestr

State var to bind the the input.

auto_focusbool

If true, the pin input receives focus on mount

default_valuestr

The default value of the pin input

error_border_colorstr

The border color when the input is invalid.

focus_border_colorstr

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.

lengthint

The length of the number input.

is_disabledbool

If true, the pin input component is put in the disabled state

is_invalidbool

If true, the pin input component is put in the invalid state

manage_focusbool

If true, focus will move automatically to the next input once filled

maskbool

If true, the input's value will be masked just like type=password

placeholderstr

The placeholder for the pin input

type_str

The type of values the pin-input should allow ("number" | "alphanumeric").

variantLiteral

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

namestr

The name of the form field

Event Triggers

TriggerDescription
on_change

The on_change event handler is called when the value or checked state of the component changes.

on_complete

Called when the user completes a form. For example, it’s called when the user clicks on a complete button.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting