gluestack-ui PinInput Component | Installation, Usage, and API

This is an illustration of a PinInput component.

import { PinInput, PinInputField } from "@/components/ui/pin-input"

function Example() {
  return (
    <PinInput noOfFields={4}>
      {Array.from({ length: 4 }).map((_, index) => (
        <PinInputField key={index} index={index} />
      ))}
    </PinInput>
  )
}

Installation

CLI

Manual

Run the following command:

npx gluestack-ui add pin-input

Step 1: Install the following dependencies:

npm i @gluestack-ui/pin-input

Step 2: Copy and paste the following code into index.tsx in your project.

"use client"
import React, { forwardRef } from "react"
import { View, TextInput } from "react-native"
import { tva } from "@gluestack-ui/nativewind-utils/tva"
import { createPinInput } from "@gluestack-ui/pin-input"
import {
  useStyleContext,
  withStyleContext,
} from "@gluestack-ui/nativewind-utils/withStyleContext"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"

const SCOPE = "PIN_INPUT"

const PinInputRoot = createPinInput({
  Root: withStyleContext(View, SCOPE),
  Input: TextInput,
})

const PinInputStyle = tva({
  base: `flex flex-row gap-2.5 p-2 rounded-md bg-transparent items-center justify-center`,
  variants: {
    size: {
      sm: ``,
      md: ``,
      lg: ``,
      xl: ``,
    },
  },
})

const PinInputFieldStyle = tva({
  base: `flex w-10 h-10 p-0 rounded-md text-typography-950 text-base bg-background-50 text-center ios:leading-[0px] border border-background-200 data-[hover=true]:bg-background-100 data-[hover=true]:border-background-200 web:data-[focus=true]:outline web:data-[focus=true]:outline-blue-200 data-[focus=true]:bg-background-200`,
  parentVariants: {
    size: {
      xl: "h-12 w-12 text-2xl",
      lg: "h-11 w-11 text-xl",
      md: "h-10 w-10 text-lg",
      sm: "h-9 w-9 text-base",
    },
  },
})

type IPinInputProps = React.ComponentProps<typeof PinInputRoot> &
  VariantProps<typeof PinInputStyle> & { className?: string }

const PinInput = forwardRef<
  React.ElementRef<typeof PinInputRoot>,
  IPinInputProps
>(({ children, size = "lg", className, ...props }, ref) => {
  return (
    <PinInputRoot
      ref={ref}
      className={PinInputStyle({
        class: className,
      })}
      {...props}
      context={{ size: size }}
    >
      {children}
    </PinInputRoot>
  )
})

type IPinInputFieldProps = React.ComponentProps<typeof PinInputRoot.Input> &
  VariantProps<typeof PinInputFieldStyle> & { className?: string }

const PinInputField = forwardRef<
  React.ElementRef<typeof PinInputRoot.Input>,
  IPinInputFieldProps
>(({ className, size, ...props }, ref) => {
  const { size: parentSize } = useStyleContext(SCOPE)
  return (
    <PinInputRoot.Input
      ref={ref}
      className={PinInputFieldStyle({
        class: className,
        parentVariants: {
          size: size ?? parentSize,
        },
      })}
      {...props}
    />
  )
})

PinInput.displayName = "PinInput"
PinInputField.displayName = "PinInputField"

export { PinInput, PinInputField }

Important Note

Note: Step 3 is optional and only required if you want to add support for React Server Components, You can skip this and jump to Step 4 directly if you don't have this requirement.

Step 3(optional): Copy and paste the following code into index.web.tsx in your project.

FILE NOT FOUND!!

Step 4: Copy and paste the following code into styles.tsx in your project.

FILE NOT FOUND!!

Step 5: Update the import paths to match your project setup.

API Reference

To use this component in your project, include the following import statement in your file.

import { PinInput, PinInputField } from "@/components/ui/pin-input"

export default () => (
  <PinInput>
    <PinInputField />
  </PinInput>
)

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

PinInput

It inherits all the properties of react-native's View component on native and html div tag on web.

Prop	Type	Description
value	string	The value to be used in the pin input. This is the value that will be returned on form submission.
onChange	(value: string) => void	Function called when the value of the pin input is changed.
onComplete	(value: string) => void	Function called when the last pin input is filled.

PinInputField

It inherits all the properties of of react-native's TextInput component on native and html input tag on web.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

PinInput with caption

This is an example of a PinInput component with a caption.

import {
  FormControl,
  FormControlLabel,
  FormControlLabelText,
} from "@/components/ui/form-control"
import { PinInput, PinInputField } from "@/components/ui/pin-input"

function App() {
  const [value, setValue] = useState("")
  useEffect(() => {
    console.log(value)
  }, [value])
  return (
    <FormControl className="gap-4">
      <FormControlLabel>
        <FormControlLabelText>Enter OTP</FormControlLabelText>
      </FormControlLabel>
      <PinInput value={value} onChange={setValue} numberOfFields={4}>
        {Array.from({ length: 4 }).map((_, index) => (
          <PinInputField key={index} index={index} />
        ))}
      </PinInput>
    </FormControl>
  )
}