Benjamin Palko
f526f5c0aa
Some checks failed
Deploy / deploy (push) Failing after 39s
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com> Reviewed-on: #5
39 lines
1.4 KiB
Markdown
39 lines
1.4 KiB
Markdown
### OTP
|
|
|
|
OTP (One-Time Password) component for inputting verification codes. It's usually 4 to 6 digits long and is used for two-factor authentication (2FA) or passwordless login.
|
|
|
|
[OTP docs](https://daisyui.com/components/otp/)
|
|
|
|
#### Class names
|
|
|
|
- component: `otp`
|
|
- size: `otp-xs`, `otp-sm`, `otp-md`, `otp-lg`, `otp-xl`
|
|
- modifier: `otp-joined`
|
|
- color: `otp-neutral`, `otp-primary`, `otp-secondary`, `otp-accent`, `otp-info`, `otp-success`, `otp-warning`, `otp-error`
|
|
|
|
#### Syntax
|
|
|
|
```html
|
|
<label class="otp {MODIFIER}">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<input
|
|
type="text"
|
|
autocomplete="one-time-code"
|
|
inputmode="numeric"
|
|
maxlength="4"
|
|
pattern="[0-9]{4}"
|
|
required
|
|
/>
|
|
</label>
|
|
```
|
|
|
|
#### Rules
|
|
|
|
- {MODIFIER} is optional and can have one of the size/color class names
|
|
- `otp-joined` modifier connects the character boxes together
|
|
- the `otp` class is for a label. The label should have 4 to 6 empty `<span>` elements for the visual representation of each digit and an input field for entering the code
|
|
- The number of `<span>` elements must match the `maxlength` attribute and the pattern in the input field. For example, if you have 6 `<span>` elements, the input should have `maxlength="6"` and `pattern="\d{6}"`
|
|
- `autocomplete="one-time-code"` and `inputmode="numeric"` are important for mobile devices to show the appropriate keyboard and to allow autofill of the OTP code
|