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

The PinInput component can also be customized as seen below.

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

rc.PinInput

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

PropType | ValuesDefault
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
"outline" | "filled" | "flushed" | ...
name
str

Event Triggers

See the full list of default event triggers
TriggerDescription
on_change Fired when the pin input is changed.
on_complete Fired when the pin input is completed.