OTP Field

This component provides a Svelte implementation of the COSS OTP Field behavior. Each slot is a real native input.

Installation

pnpm dlx shadcn-svelte@latest add https://coss-sv.vercel.app/r/otp-field.json

Usage

<script lang="ts">
  import * as OTPField from "$lib/components/ui/otp-field/index.js";
</script>

<OTPField.Root aria-label="Verification code" length={6}>
  <OTPField.Input />
  <OTPField.Input aria-label="Character 2 of 6" />
  <OTPField.Input aria-label="Character 3 of 6" />
  <OTPField.Separator />
  <OTPField.Input aria-label="Character 4 of 6" />
  <OTPField.Input aria-label="Character 5 of 6" />
  <OTPField.Input aria-label="Character 6 of 6" />
</OTPField.Root>

API Reference

Each slot is a real <input>. Its order in the tree must match length on the root.

OTPField.Root

Root component. class merges with the default layout styles.

Use required length for the number of characters. The previous maxLength prop from the legacy input-otp package is not used.

OTPField.Input

Renders one OTP character input. Slots use DOM order and do not take an index prop.

Label the OTP control on the root with aria-label or a visible Label or Field.Label. The first input inherits the field label. Give later slots an explicit label such as Character 2 of 6.

OTPField.Separator

Visual separator between slot groups. It uses the design-system Separator for layout and semantics.

Examples

Large

With Separator

With Label

Custom normalization

Set validationType="none" with normalizeValue to normalize pasted input before it reaches state, or to enforce custom character rules. Use inputMode for the virtual keyboard hint and onValueInvalid for characters rejected after normalization.

Auto Validation

Alphanumeric

Use validationType="alphanumeric" for recovery, backup, or invite codes that mix letters and numbers.

Placeholder hints

Each slot is a real input, so placeholder and CSS work as usual. Hide the placeholder on focus when the active slot should not show a hint.

Masked entry

Pass mask on the root when the code should be obscured while it is typed, for example on shared screens.

Changelog

• Apr 14, 2026 - input-otp.tsx was replaced by otp-field.tsx and @coss/otp-field upstream.