PinInput

PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.

Theming

The PinInput is a multi part component.

PinInput inherits the style from Input.

If you want to change the style of the component, please check here.

export const PinInput: ComponentMultiStyle<"PinInput"> = mergeMultiStyle(
  Input,
  {
    baseStyle: {
      container: {
        gap: "sm",
      },
      field: {
        textAlign: "center",
      },
    },

    variants: {
      unstyled: {
        field: {
          h: "auto",
        },
      },
    },

    sizes: {
      xs: {
        field: {
          fontSize: "xs",
          boxSize: "6",
          rounded: "sm",
        },
      },
      sm: {
        field: {
          fontSize: "sm",
          boxSize: "8",
          rounded: "md",
        },
      },
      md: {
        field: {
          fontSize: "md",
          boxSize: "10",
          rounded: "md",
        },
      },
      lg: {
        field: {
          fontSize: "lg",
          boxSize: "12",
          rounded: "md",
        },
      },
    },
  },
)({ omit: ["addon", "sizes"] })

Copied!

Edit this page on GitHub

PreviousNumberInput NextPhoneInput