@fluixi-ui/pin-input
v0.1.0-alpha.5
Published
Headless PIN/OTP input for the Fluixi UI ecosystem
Readme
@fluixi-ui/pin-input
Headless PIN / one-time-code input for the Fluixi UI ecosystem.
Renders length single-character cells that auto-advance as you type, walk back
on Backspace, navigate with the arrow keys, and distribute a pasted (or
SMS-autofilled) code across the cells. Controlled via value/onValueChange or
uncontrolled via defaultValue; onComplete fires when the last cell fills.
import { PinInput } from '@fluixi-ui/pin-input';
<PinInput length={6} otp onComplete={verify} />
<PinInput type="alphanumeric" mask value={code()} onValueChange={setCode} />Style via [data-pin-input] / [data-pin-input-field], or override the tokens
--flx-ui-pin-size and --flx-ui-pin-gap.
