OTP

A segmented verification input for short confirmation codes.

The OTP Component

Basic Usage

Code Snippet

<script lang="ts">		import { Otp } from '$lib/components'; 		let value = $state('');	</script> 	<Otp bind:value={value} length={6} ariaLabel="Verification code" />

Examples

States

Use invalid and disabled states to reflect delivery and retry flows.