PinInput

Usage

To use the PinInput component, import it from @pillar-ui/core. Then, create the PinInput with the desired props:

import React from 'react'
import { PinInput } from '@pillar-ui/core'

const MyComponent: React.FC = () => {
  return <PinInput size="md" variant="outline" corner="sm" color="pri" fluid={false} placeholder="○" length={4} />
}

Props

The PinInput component supports the following props:

Filled

A filled input is a type of PinInput field that has a background color. This makes it easy for users to see where they are typing and to distinguish between input fields.

export const FilledInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput autoFocus variant="filled" />
      <PinInput disabled variant="filled" />
      <PinInput readOnly variant="filled" />
      <PinInput isInvalid variant="filled" />
    </Flex>
  )
}

Outline

The outline variant of the PinInput component is a type of input field that has a border around it. This makes it easy for users to see where they are typing and to distinguish between input fields.

export const OutlineInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput autoFocus variant="outline" />
      <PinInput disabled variant="outline" />
      <PinInput readOnly variant="outline" />
      <PinInput isInvalid variant="outline" />
    </Flex>
  )
}

Bordered

The bordered variant of the PinInput component is a type of input field that has a bottom border that visually separates the input from others and shows the edge of the input.

export const BorderedInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput autoFocus variant="bordered" />
      <PinInput disabled variant="bordered" />
      <PinInput readOnly variant="bordered" />
      <PinInput isInvalid variant="bordered" />
    </Flex>
  )
}

Size

Type: string
Default: md
Options: 2xs | xs | sm | md | lg | xl | 2xl

The size prop determines the overall size of the PinInput. It accepts any of the Size types defined in our library (2xs to 2xl). If not provided, it defaults to the md size.

import { Flex, PinInput } from '@pillar-ui/core'

export const SizePinInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput size="xs" />
      <PinInput size="sm" />
      <PinInput size="md" />
      <PinInput size="lg" />
      <PinInput size="xl" />
    </Flex>
  )
}

Corner

Type: string
Default: sm
Options: sharp | xs | sm | md | lg | xl | full | circle

The corner prop determines the border radius of the PinInput. It accepts any of the Corner types defined in our library (sharp, xs, sm, md, lg, xl, full, circle). If not provided, it defaults to the sm corner.

import { Flex, PinInput } from '@pillar-ui/core'

export const CornerPinInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput corner="sharp" />
      <PinInput corner="xs" />
      <PinInput corner="sm" />
      <PinInput corner="md" />
      <PinInput corner="lg" />
      <PinInput corner="xl" />
      <PinInput corner="full" />
    </Flex>
  )
}

Color

Type: string
Default: primary
Options: primary | secondary | bg | warning

The color prop determines the color scheme of the PinInput. It accepts any of the Color types defined in our library (primary, secondary, bg, warning). If not provided, it defaults to the primary color.

import { Flex, PinInput } from '@pillar-ui/core'

export const ColorPinInput = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput color="pri" />
      <PinInput color="war" />
      <PinInput color="sec" />
      <PinInput color="bg" />
    </Flex>
  )
}

Placeholder

Type: string
Default: ○

The placeholder prop sets the default placeholder character displayed in each input field of the PinInput. It can be any single character or symbol.

import { Flex, PinInput } from '@pillar-ui/core'

export const ColorPinPlaceholder = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput length={10} />
      <PinInput placeholder="◊" />
      <PinInput placeholder="◉" />
      <PinInput placeholder="●" />
      <PinInput placeholder="◯" />
      <PinInput placeholder="◵" />
      <PinInput placeholder="◬" />
    </Flex>
  )
}

Length

Type: number
Default: 4

The length prop specifies the number of input fields in the PinInput. Each input field will hold a single character of the PIN or security code. If not provided, it defaults to 4.

import { Flex, PinInput } from '@pillar-ui/core'

export const PinInputLength = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput />
      <PinInput length={5} />
      <PinInput length={6} />
      <PinInput length={7} />
      <PinInput length={8} />
      <PinInput length={10} />
    </Flex>
  )
}

Types

Type: string
Default: text
Options: number | text | password

The ColorPinType component story demonstrates how to use different input types with the PinInput component.

import { PinInput, Flex } from '@pillar-ui/core'

export const ColorPinType = () => {
  return (
    <Flex gap="sm" direction="column">
      <PinInput type="number" />
      <PinInput type="text" />
      <PinInput type="password" />
    </Flex>
  )
}

Use Case

The PinInput component is useful when you need to gather user input for a PIN or security code in a secure and organized manner. This can be useful in scenarios like:

User authentication
OTP verification
Transaction confirmations

Troubleshooting

In this section, we provide guidance on troubleshooting common issues that may arise when using the PinInput component.

PinInput not working properly: Ensure that you've properly installed the required dependencies and that the PinInput component is imported correctly. Check the console for any error messages that might indicate issues with dependencies or component imports.
PinInput not rendering as expected: Double-check the props you've passed to the PinInput component, such as size, variant, corner, color, and length. Verify that they match the intended visual style and behavior.
PinInput not accessible: Ensure that the PinInput component is accessible to all users, including those with disabilities. Verify that appropriate ARIA attributes are provided and that the component can be navigated using keyboard controls.

Conclusion

In this document, we covered the PinInput component, a versatile input field that allows users to enter PIN or security codes. It can be used for various purposes, such as authentication, OTP verification, and transaction confirmations.

Key Features:

Customizable size, variant, corner, and color.
Supports different input types, such as number, text, and password.
Offers multiple visual styles, including filled, outline, and bordered.
Handles pasting data into the input fields.

Get started with the PinInput component by importing it into your project and configuring the props based on your requirements. If you encounter any issues or have questions, refer to the Troubleshooting section or seek help from the community.

Happy coding!

Pillar UI React PinInput Component documentation