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"
/>payload.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"
/>Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.
@inputFires as the editable value changes.@changeFires when the component's committed value or selection changes.@completeFires when the component emits the complete event.@pasteFires after clipboard content is processed.@clearFires after the current value or selection is cleared.@errorFires when the component cannot complete an operation.<PinInput
@input='console.log(payload)'
@change='console.log(payload)'
@complete='console.log(payload)'
@paste='console.log(payload)'
@clear='console.log(payload)'
@error='console.log(payload)'
/>import { registerOutputHandler } from "@wrnexus/csr/outputs"
const component = document.querySelector("[data-ui-component=\"PinInput\"], [data-component=\"PinInput\"]")
if (component) registerOutputHandler(component, "input", (payload) => {
console.log("input", payload)
})
if (component) registerOutputHandler(component, "change", (payload) => {
console.log("change", payload)
})
if (component) registerOutputHandler(component, "complete", (payload) => {
console.log("complete", payload)
})
if (component) registerOutputHandler(component, "paste", (payload) => {
console.log("paste", payload)
})
if (component) registerOutputHandler(component, "clear", (payload) => {
console.log("clear", payload)
})
if (component) registerOutputHandler(component, "error", (payload) => {
console.log("error", payload)
})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 |