OTPInput

Enter a configurable 4–8 digit one-time code with full-code paste, SMS autofill, and native form submission and reset.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Enter a numeric one-time code already sent by an application or identity provider. This component handles entry; the application sends and verifies codes and owns any countdown.

Defaults to 6 digits; supports 4, 5, 6, 7, or 8. Ordinary entry filters non-digits and limits length. Paste is validated strictly as described below.
oncomplete runs only when user entry produces a new complete value. Initialization, external assignment, and repeated synchronization of the same complete value do not trigger it.
name, form, required, disabled, readonly, and autocomplete="one-time-code" are applied to the real input.

Import

import { OTPInput } from '@snowui-design-system/components';

Quick Start

<script lang="ts">    import { OTPInput } from "@snowui-design-system/components";    let code = $state("");</script> <OTPInput bind:value={code} aria-label="Verification code" oncomplete={(value) => console.log(value)} />

AI documentation

Use SnowUI to build the interface described by my requirements or design below. A core direction for SnowUI is interactive interfaces generated by AI in conversation. This capability is in development; official components have not yet completed chat-host acceptance. If I request an interface inside a conversation, verify host execution capabilities, component versions, and actual adapter evidence first. Use only verified subsets and allowed actions; preserve user input and distinguish local interaction, business submission, and conversation continuation. If unsupported, explain the limitation and use an authorized alternative. A web preview, code, or visual imitation does not establish in-conversation interaction. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof. This exemption also covers real work and authorized data: do not require a product ID, usage declaration, project ledger, or release check for conversation-only use. Review the separate product license only if the result is adopted into an independent website or application; never register a chat or generated surface as a project. The linked AI documents are reviewed English translations of the current public component and design guidance. Check the installed package version and revisit the linked pages when source or product scope changes. On first adoption, read the complete LICENSE: https://snowui.dev/LICENSE. For an installed version, its bundled license applies. Reuse checks within the same task, version, product and confirmed scope. Prepare downloads, installation, materials, and the environment using https://snowui.dev/llms/en/setup.md and machine setup https://snowui.dev/llms/setup.json. Detect actual file, terminal, Svelte build, resource-loading, and in-message rendering capabilities first. In an authorized Svelte 5 environment, reuse compatible dependencies or use pnpm add --save-exact @snowui-design-system/components@0.3.0-alpha.11 @snowui-design-system/resource-svelte@1.0.31 (or the existing package manager), resolve resource-base transitively, load @snowui-design-system/components/styles once, and run the component/material interaction checks. Select real named materials from https://snowui.dev/llms/resources.json. Never use a maintainer's disk path or load the full library into each message. Report download, installation, build, asset loading, in-message interaction, and continuation separately. Provide a non-secret setup summary for later use. A local install or copied prompt does not configure another AI product or a new chat. Discover that host and follow a real verified connection when available; machine setup currently has no SnowUI chat connection URL. Do not invent endpoints, bypass host permissions, write AI memory, or claim unexecuted installation or rendering. Read the design guide: https://snowui.dev/llms/en/design-system.md. Break the page into regions and implement them with public components and semantic HTML. Read the styling order once: https://snowui.dev/llms/en/styling.md. Match public Props such as variant and size first and preserve the original styles where possible. If customization is necessary, use your own class (including existing Tailwind), then instance style. Same-category Tokens are recommended; use only public roots, parts and documented overrides. Select components as needed: https://snowui.dev/llms/en/component-selection.md. Use https://snowui.dev/llms-en.txt to discover them, then read only the relevant API, composition rules and examples. For SnowUI Figma input, also read https://snowui.dev/llms/en/figma.md. The official package is for Svelte 5. Confirm the target framework; explain any necessary port instead of pretending a changed import provides another framework. Conversation-only use follows the free exemption above without project or seat review. For independent products only, Free use does not require registration, an account, a public key or a signed paid license file; follow the LICENSE limits on purpose, projects and developers. A claimed paid plan is not verified authorization. Verify trusted evidence when paid rights are needed; unavailable evidence or documents remain unknown, and only permitted work may continue. Apply my requirements below. Do not invent APIs, addresses or authorization. Start with the reviewed OTPInput reference: https://snowui.dev/llms/en/components/otp-input/reference.md. Complete public manual: https://snowui.dev/llms/en/components/otp-input/reference.md Component guide: https://snowui.dev/llms/en/components/otp-input.mdPublic API: https://snowui.dev/llms/en/components/otp-input/api.mdDependency: @snowui-design-system/components; read the example's actual imports and load the package stylesheet once. Preserve its behavior and adapt only what my requirements need.

API Reference

Property	Type	Default	Example	Description
`value`	`string`	`—`	`value="Example"`	Normalized numeric value supporting `bind:value`; external changes update the displayed digits.
`defaultValue`	`string`	`—`	`defaultValue="Example"`	Initial value when value is omitted, and the native form reset baseline. When both are supplied, value controls the current display and defaultValue controls reset.
`length`	`OTPLength`	`6`	`length={value}`	Number of code digits. Changing it immediately truncates the value to the new length and rebuilds the visual slots.
`name`	`string`	`—`	`name="Example"`	Native field name. FormData collects the normalized complete or partial value when enabled.
`form`	`string`	`—`	`form="Example"`	Associate the input with an external form by its id.
`disabled`	`boolean`	`false`	`disabled`	Prevent focus and editing, and exclude the field from FormData.
`readonly`	`boolean`	`false`	`readonly`	Allow focus, selection, and submission while preventing editing.
`required`	`boolean`	`false`	`required`	Enable native required-field validation.
`autocomplete`	`HTMLInputAttributes["autocomplete"]`	`"one-time-code"`	`autocomplete={value}`	Use the SMS one-time-code autofill semantic by default.
`autofocus`	`boolean`	`—`	`autofocus`	Request initial focus. Avoid competing with other autofocus controls.
`tabindex`	`number`	`—`	`tabindex={42}`	Native keyboard focus order.
`id`	`string`	`—`	`id="example"`	The real input id, usable by an associated label's `for` attribute.
`title`	`string`	`—`	`title="Example"`	Native tooltip text; does not replace an accessible name.
`invalid`	`boolean`	`false`	`invalid`	Persistent caller-controlled error state, with aria-invalid and Input's border, focus ring, error text, and shake. The internal two-second timer does not clear this Prop.
`error`	`string \| Snippet`	`Locale message`	`error={errorContent}`	Error text or content. An explicit value takes precedence over the default locale message.
`oncomplete`	`(value: string) => void`	`—`	`oncomplete={(value) => { /* handle value */ }}`	Called when user entry produces a new complete value; initialization, external assignment, and unchanged repeated values do not trigger it.
`oninput`	`(event: Event) => void`	`—`	`oninput={(value) => { /* handle value */ }}`	Called after user entry is normalized or an accepted paste is written. Rejected paste does not trigger it.
`onchange`	`(event: Event) => void`	`—`	`onchange={(value) => { /* handle value */ }}`	Forward the real input's native change event.
`onfocus`	`(event: FocusEvent) => void`	`—`	`onfocus={(value) => { /* handle value */ }}`	Called after the real input gains focus and the active slot is synchronized.
`onblur`	`(event: FocusEvent) => void`	`—`	`onblur={(value) => { /* handle value */ }}`	Called after the real input loses focus and the active indicator is hidden.
`onkeydown`	`(event: KeyboardEvent) => void`	`—`	`onkeydown={(value) => { /* handle value */ }}`	Called before native key handling; preventDefault can cancel the browser default action.
`onpaste`	`(event: ClipboardEvent) => void`	`—`	`onpaste={(value) => { /* handle value */ }}`	Called before paste validation; preventDefault cancels the component's entire paste handling.