Secure multi-cell PIN and verification-code input with regex and paste support.
Change any prop and inspect the server-rendered component immediately.
<PinInput
label="Default four-digit PIN"
name="pin-input-1"
/>Compare configurations and resize the browser to check responsive behavior.
Live default four-digit pin example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Default four-digit PIN"
name="pin-input-1"
/>Live different lengths example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="3-digit code"
name="pinLength3"
length="3"
/>
<PinInput
label="5-digit code"
name="pinLength5"
length="5"
/>
<PinInput
label="7-digit code"
name="pinLength7"
length="7"
/>Live pre-filled verification code example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Pre-filled verification code"
name="pin-input-3"
value="482915"
length="6"
/>Live masked security pin example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Masked security PIN"
name="pin-input-4"
masked="true"
/>Live alphanumeric regex example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Alphanumeric regex"
name="pin-input-5"
length="6"
pattern="[A-Z0-9]"
inputMode="text"
/>Live grouped code with separator example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Grouped code with separator"
name="pin-input-6"
length="6"
separator="–"
groupSize="3"
/>Live paste from clipboard example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Paste from clipboard"
name="pin-input-7"
length="6"
/>Live disabled pin input example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Disabled PIN input"
name="pin-input-8"
length="6"
disabled="true"
/>Live read-only code example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Read-only code"
name="pin-input-9"
value="739204"
length="6"
readonly="true"
/>Live validation state example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Validation state"
name="pin-input-10"
length="6"
required="true"
/>Live supporting help text example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Supporting help text"
name="pin-input-11"
length="6"
helpText="Enter the code sent to your registered email address."
/>Live large pin cells example with keyboard navigation, filtering, and copyable component code.
<PinInput
size="lg"
label="Large PIN cells"
name="pin-input-12"
length="6"
/>Live custom placeholder example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Custom placeholder"
name="pin-input-13"
length="6"
placeholder="•"
/>Live automatic form submission example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Automatic form submission"
name="pin-input-14"
length="6"
autoSubmit="true"
/>Live completion events example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="Completion events"
name="pin-input-15"
length="6"
/>Live javascript methods example with keyboard navigation, filtering, and copyable component code.
<PinInput
label="JavaScript methods"
name="pin-input-16"
length="6"
/>Events are declared with @event, bubble from the component root, and expose their state through event.detail.
@inputFires after any PIN cell input is processed.@changeFires when the combined PIN value changes.@completeFires when every PIN cell contains an accepted character.@pasteFires after clipboard content is filtered and distributed.@clearFires after the complete PIN value is cleared.@errorFires when component configuration, such as regex, is invalid.const component = document.querySelector("[data-wrn-pin-input]")
component.addEventListener("complete", (event) => {
console.log(event.detail.value)
console.log(event.detail.complete)
})
component.addEventListener("paste", (event) => {
console.log(event.detail)
})All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
label | string | "Verification code" | No |
name | string | "pin" | No |
value | string | "" | No |
length | number | 4 | No |
pattern | string | "[0-9]" | No |
type | string | "text" | No |
inputMode | string | "numeric" | No |
placeholder | string | "○" | No |
autocomplete | string | "one-time-code" | No |
masked | boolean | false | No |
disabled | boolean | false | No |
readonly | boolean | false | No |
required | boolean | false | No |
autoFocus | boolean | false | No |
autoSubmit | boolean | false | No |
allowPaste | boolean | true | No |
clearable | boolean | true | No |
clearLabel | string | "Clear code" | No |
separator | string | "" | No |
groupSize | number | 0 | No |
helpText | string | "" | No |
invalid | boolean | false | No |
validationMessage | string | "" | No |
class | string | "" | No |