PinInput
PinInput provides a sequence of fields for entering a PIN or verification code.
Source
LLM docs
Package
Examples
6
Properties
75
Playground
Basics
Controlled 4-digit PIN input with automatic focus handoff between cells.
Loading demo…
import { useState } from 'react';
import { PinInput } from '@plocks/ui';
export function Demo() {
const [value, setValue] = useState('');
return <PinInput value={value} onChange={setValue} label="PIN code" />;
}Types
Contrast numeric-only PIN entry with an alphanumeric option for recovery codes.
Loading demo…
import { Block, PinInput } from '@plocks/ui';
export function Demo() {
return (
<Block>
<PinInput type="numeric" label="Numeric" />
<PinInput type="alphanumeric" label="Alphanumeric" />
</Block>
);
}Variants
Compare the default, filled, outline, and unstyled field shells on PinInput.
Loading demo…
import { Column, PinInput } from '@plocks/ui';
const variants = ['default', 'filled', 'outline', 'unstyled'] as const;
export function Demo() {
return (
<Column gap="md" fullWidth>
{variants.map(variant => (
<PinInput key={variant} variant={variant} label={`${variant} variant`} />
))}
</Column>
);
}Sizes
Compare the
size prop from xs through lg.Loading demo…
import { Block, PinInput } from '@plocks/ui';
const SIZES = ['xs', 'sm', 'md', 'lg'] as const;
export function Demo() {
return (
<Block>
{SIZES.map((size) => (
<PinInput key={size} size={size} label={size} />
))}
</Block>
);
}Lengths
Compare 4, 6, and 8-digit PIN inputs tailored for common authentication flows.
Loading demo…
import { Block, PinInput } from '@plocks/ui';
const LENGTHS = [4, 6, 8];
export function Demo() {
return (
<Block>
{LENGTHS.map((length) => (
<PinInput key={length} length={length} label={`${length} digits`} />
))}
</Block>
);
}Security
Conceal digits with
mask, offer SMS code autofill with oneTimeCode, and show inline validation messages through error.Loading demo…
import { Block, PinInput } from '@plocks/ui';
export function Demo() {
return (
<Block>
<PinInput mask defaultValue="1234" label="Masked" />
<PinInput oneTimeCode length={6} label="One-time code" />
<PinInput defaultValue="1289" error="Incorrect PIN. Try again." label="Validation" />
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources