PinInput · Glowup

Glowup

INPUTS · 33 / 89

PinInput

PinInput — a Material You inputs component for React Native and web.

󱀫

packages/ui/src/components/PinInput.tsx

Live demo

󰄜

360

󰓶

720

󰍹

Full

Verification code

Paste the whole code into any cell

Properties

7 controls

Label

Length

Type

Mask

Helper Text

Error Message

Disabled

Usage

PinInput.tsx

Variants

The states and shapes this component is meant to be used in.

Six digits

Verification code

We sent a 6-digit code to ada@acme.example.

Masked

Alphanumeric

Invite code

Letters and digits, case-insensitive.

Error and disabled

Verification code

󰗖

That code has expired.

API reference

Generated from the library's TypeScript, so it cannot drift from the implementation.

Props

15 on PinInputProps

Filter props

󰍉

onChangeText

required

(value: string) => void

value

required

string

autoFocus

boolean

cellSize

number

default: 48

Cell edge length. Defaults to 48.

disabled

boolean

error

string

helperText

string

Supporting text below the cells; hidden while an error is shown.

label

string

length

number

default: 6

Number of cells. Defaults to 6.

mask

boolean

default: false

Renders dots instead of characters.

onComplete

(value: string) => void

Fired once the last cell is filled.

required

boolean

style

StyleProp<ViewStyle>

testID

string

type

"numeric" | "alphanumeric"

default: "numeric"

Restricts the accepted characters. Defaults to `"numeric"`.