Ready for Dev, so its markup, attributes, events and styles can all still change without notice,
it is not covered by the accessibility gate, and it is not published to npm. It is on this site so the work
can be seen and reviewed - nothing more.
Otp
A one-time-code input, rendered as <section is="root-otp">.
Usage
<section is="root-otp" label="Verification code" length="6"></section>
Read the joined code from the element's value; listen for root-otp.complete.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
length |
number |
6 |
Number of digit boxes |
label |
string |
'One-time code' |
Accessible name for the group |
disabled |
boolean | - | Disables all boxes |
Events
| Event | Detail | Description |
|---|---|---|
root-otp.input |
{ value } |
Fired on every change |
root-otp.change |
{ value } |
Fired when the code becomes complete |
root-otp.complete |
{ value } |
Fired when every box is filled |
Extends
HTMLElement
- use with <section is="root-otp">. Exposed as
role="group"; each box is labelled "Digit n" and the first carries
autocomplete="one-time-code".