PinInput
Loading example…
Masked numeric PIN. autocomplete is disabled on purpose so browsers do not
mistake it for a one-time code.
Import
Section titled “Import”import { PinInput } from "@jcsoftdev/ui/forms";Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/pin-input.
<PinInput length={4} label="PIN del barbero" />| Prop | Type | Default | Description |
|---|---|---|---|
length |
number |
4 |
|
value |
string |
||
defaultValue |
string |
"" |
|
onValueChange |
((value: string) => void) |
||
label |
string |
"PIN" |
Accessible name of the input. |
statusLabel |
((entered: number, length: number) => string) |
defaultStatusLabel |
Builds the polite live-region announcement. |
className |
string |
* marks a required prop.
Storybook stories
Section titled “Storybook stories”Source
Section titled “Source”packages/ui/src/forms/pin-input/pin-input.tsx