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.