Input OTP

A one-time password input that types into one input and draws each character in its own slot.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

index.svelte index.module.css

<script lang="ts">
	import { InputOTP, REGEXP_ONLY_DIGITS } from '@sveltery/base/input-otp';
	import styles from './index.module.css';
</script>

<InputOTP.Root
	maxlength={6}
	pattern={REGEXP_ONLY_DIGITS}
	aria-label="Verification code"
	containerClass={styles.Container}
>
	{#snippet render({ slots })}
		<div class={styles.Slots}>
			{#each slots as slot, index (index)}
				<div class={styles.Slot} data-active={slot.isActive || undefined}>
					{slot.char ?? slot.placeholderChar}
					{#if slot.hasFakeCaret}
						<div class={styles.Caret}></div>
					{/if}
				</div>
			{/each}
		</div>
	{/snippet}
</InputOTP.Root>

InputOTP ports input-otp 1.4.2, which Sveltery UI’s input OTP is built on. One real <input> sits over the slots, so typing, paste, selection and autofill are the browser’s own. For the Base UI part with one input per slot, see OTP Field.

Anatomy

Import the component and draw the slots from its state:

Anatomy

<script lang="ts">
	import { InputOTP } from '@sveltery/base/input-otp';
</script>

<InputOTP.Root maxlength={6}>
	{#snippet render({ slots })}
		{#each slots as slot}
			<div>{slot.char}</div>
		{/each}
	{/snippet}
</InputOTP.Root>

Examples

Slots as children

Without render, children renders. A slot component reads the state with getInputOTPContext():

Slot.svelte

<script lang="ts">
	import { getInputOTPContext } from '@sveltery/base/input-otp';

	let { index }: { index: number } = $props();

	const otp = getInputOTPContext();
	const slot = $derived(otp.slots[index]);
</script>

<div data-active={slot.isActive}>{slot.char}</div>

Patterns

pattern drops input that doesn’t match. REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS and REGEXP_ONLY_DIGITS_AND_CHARS are exported:

Letters and digits

<InputOTP.Root maxlength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} inputmode="text">
	<!-- slots -->
</InputOTP.Root>

Reading the input

Rest props go to the input, attachments included:

Focus on mount

<InputOTP.Root maxlength={6} {@attach (input) => input.focus()}>
	<!-- slots -->
</InputOTP.Root>

API reference

Root

Holds the slots and the input that types into them. Rest props go to the input. Renders a <div> element.

defaultValue string ''

Name: defaultValue
Description: The code an empty value starts from.
Type: string
Default: ''

value string —

Name: value
Description: The code.
Type: string
Binding: bind:value

containerClass ClassValue | null —

Name: containerClass
Description: Class for the container that holds the slots and the input.
Type: ClassValue | null

maxlength^* number —

Name: maxlength
Description: The number of slots.
Type: number

noScriptCSSFallback string | null —

Name: noScriptCSSFallback
Description: CSS that shows the plain input when JavaScript is off. null leaves it out.
Type: string | null

onComplete function —

Name: onComplete
Description: Called with the value when the last slot fills.
Type: (value: string) => void

pasteTransformer function —

Name: pasteTransformer
Description: Rewrites pasted text before it is inserted.
Type: (pasted: string) => string

pattern string | RegExp —

Name: pattern
Description: Every value must match it, for example REGEXP_ONLY_DIGITS. Input that doesn't match is dropped.
Type: string | RegExp

placeholder string —

Name: placeholder
Description: Characters shown in the empty slots, one per slot, through placeholderChar.
Type: string

pushPasswordManagerStrategy 'increase-width' | 'none' 'increase-width'

Name: pushPasswordManagerStrategy
Description: Widens the input so a password manager's badge sits outside the slots.
Type: 'increase-width' | 'none'
Default: 'increase-width'

textAlign 'left' | 'center' | 'right' 'left'

Name: textAlign
Description: The text alignment of the input.
Type: 'left' | 'center' | 'right'
Default: 'left'

render Snippet<[state: InputOTPRootState]> —

Name: render
Description: Renders the slots from the state. Without it, children renders and reads the state with getInputOTPContext().
Type: Snippet<[state: InputOTPRootState]>

slots InputOTPSlotState[]

Name: slots
Description: One entry per slot.
Type: InputOTPSlotState[]

isFocused boolean

Name: isFocused
Description: Whether the input is focused.
Type: boolean

isHovering boolean

Name: isHovering
Description: Whether the pointer is over the input and it is not disabled.
Type: boolean

data-input-otp

Present on the input.

data-input-otp-container

Present on the container that holds the slots and the input.

data-input-otp-mse

The end of the selection the slots mirror, set on the input.

data-input-otp-mss

The start of the selection the slots mirror, set on the input.

data-input-otp-placeholder-shown

Present on the input while the value is empty.

Attribute	Description	-
`data-input-otp`	Present on the input.
`data-input-otp-container`	Present on the container that holds the slots and the input.
`data-input-otp-mse`	The end of the selection the slots mirror, set on the input.
`data-input-otp-mss`	The start of the selection the slots mirror, set on the input.
`data-input-otp-placeholder-shown`	Present on the input while the value is empty.

--root-height

The height of the input, set on the container.