baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions
benjaminpalko/.opencode/skills/daisyui/components/otp.md
Benjamin Palko f526f5c0aa
Some checks failed
Deploy / deploy (push) Failing after 39s
Details
set up new workflow and migrate to .forgejo dir (#5) 
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com>
Reviewed-on: #5
2026-08-11 20:55:29 -04:00

1.4 KiB
Raw Blame History

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

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

<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