On this page

Input OTP Primitive

Input OTP is a Starwind Runtime primitive in the form-value-control contract family. Astro and React share one semantic component API. React coordinates reactive state through controlled and default props plus callbacks. Astro renders initial state and coordinates later changes through DOM events and Runtime methods. Raw HTML uses Runtime attributes, DOM events, and imperative methods.

Anatomy

Use the Astro primitive adapter to render InputOtp anatomy with the Runtime wiring included.

---
import { InputOtp } from "@starwind-ui/astro/input-otp";
---

<InputOtp.Root>
  <InputOtp.Group>
    <InputOtp.Slot index={0} />
    <InputOtp.Separator />
    <InputOtp.Slot index={1} />
  </InputOtp.Group>
</InputOtp.Root>

Use the React primitive adapter when InputOtp state participates in React rendering.

import { InputOtp } from "@starwind-ui/react/input-otp";

export function Example() {
  return (
    <InputOtp.Root>
      <InputOtp.Group>
        <InputOtp.Slot index={0} />
        <InputOtp.Separator />
        <InputOtp.Slot index={1} />
      </InputOtp.Group>
    </InputOtp.Root>
  );
}

Render the InputOtp data-sw-* contract yourself, then initialize createInputOtp.

<div data-sw-input-otp>
  <input data-sw-input-otp-input autocomplete="one-time-code" class="sr-only" tabindex="-1" />
  <div data-sw-input-otp-group>
    <div data-sw-input-otp-slot data-index="0">
      <span data-sw-input-otp-char></span>
      <div data-sw-input-otp-caret class="pointer-events-none absolute inset-0 hidden items-center justify-center" hidden></div>
    </div>
    <div data-sw-input-otp-separator role="separator" aria-hidden="true"></div>
    <div data-sw-input-otp-slot data-index="1">
      <span data-sw-input-otp-char></span>
      <div data-sw-input-otp-caret class="pointer-events-none absolute inset-0 hidden items-center justify-center" hidden></div>
    </div>
  </div>
</div>

<script type="module">
  import { createInputOtp } from "@starwind-ui/runtime/input-otp";

  const root = document.querySelector("[data-sw-input-otp]");
  if (root) {
    createInputOtp(root);
  }
</script>

API Reference

Root

The main element that owns the Input OTP Runtime instance.

Default element: div
Discovery hook: data-sw-input-otp
Role: -

Props

Prop Type Default

value string -

Description

Controls the current Input OTP value.

Kind

control

Targets

Full type

string

React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

value
defaultValue
onValueChange

Astro

Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.

value
defaultValue
starwind:value-change
setValue

Runtime / HTML

Use data-value for initial state, listen for starwind:value-change, and call setValue for later updates.

data-value
starwind:value-change
setValue

defaultValue string -

Description

Sets the initial Input OTP value for uncontrolled usage.

Kind

control

Targets

Full type

string

React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

value
defaultValue
onValueChange

Astro

Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.

value
defaultValue
starwind:value-change
setValue

Runtime / HTML

Use data-value for initial state, listen for starwind:value-change, and call setValue for later updates.

data-value
starwind:value-change
setValue

disabled boolean false

Description: Disables the Root part.
Kind: option
Targets: -
Full type: boolean

form string -

Description: Associates the control with a form element.
Kind: option
Targets: -
Full type: string

id string -

Description: Sets the id used by the associated native control.
Kind: option
Targets: -
Full type: string

maxLength number 6

Description: Configures the max length option for the Root part.
Kind: option
Targets: -
Full type: number

name string -

Description: Sets the submitted form field name.
Kind: option
Targets: -
Full type: string

pattern RegExp | string -

Description: Configures the pattern option for the Root part.
Kind: option
Targets: -
Full type: RegExp | string

readOnly boolean false

Description: Marks the control as read-only.
Kind: option
Targets: -
Full type: boolean

required boolean false

Description: Marks the form control as required.
Kind: option
Targets: -
Full type: boolean

onValueChange (value: string, details: InputOtpValueChangeDetails) => void -

Description

Runs when the Input OTP value changes.

Kind

callback

Targets

Full type

(value: string, details: InputOtpValueChangeDetails) => void

React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

value
defaultValue
onValueChange

Astro

Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.

value
defaultValue
starwind:value-change
setValue

Runtime / HTML

Use data-value for initial state, listen for starwind:value-change, and call setValue for later updates.

data-value
starwind:value-change
setValue

Events

Event Callback Value

valueChange onValueChange value: string

Description

Fires when the value changes for Input OTP.

DOM event

starwind:value-change

Details type

InputOtpValueChangeDetails

Timing

before-state-commit

Cancelable

Yes

Cancellation sequence

Check internal eligibility and intent.
Create one details object for the proposal.
Call the Runtime callback with the details object when the controller exposes one.
Dispatch the cancelable DOM event with the same details object, including when the callback canceled it.
Read details.isCanceled, including cancellation caused by preventDefault().
Apply the accepted state.
Notify Runtime subscribers and other accepted-only observers.

State

State Type Props

value string value / defaultValue

Description

Tracks the current Input OTP value.

Initial attribute

data-value

Runtime getter

getValue

Runtime setter

setValue

React

Use value for controlled state and defaultValue for default state, and onValueChange for change proposals.

value
defaultValue
onValueChange

Astro

Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.

value
defaultValue
starwind:value-change
setValue

Runtime / HTML

Use data-value for initial state, listen for starwind:value-change, and call setValue for later updates.

data-value
starwind:value-change
setValue

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-input-otp - Marks the Root part so Starwind Runtime can find it.

State

Attribute Value Description

data-value - Reflects the value state on the Root part.

Metadata

Attribute Value Description

data-default-value - Reflects the default value prop on the Root part.

data-disabled - Reflects the disabled prop on the Root part.

data-form - Reflects the form prop on the Root part.

data-id - Reflects the id prop on the Root part.

data-max-length - Reflects the max length prop on the Root part.

data-name - Reflects the name prop on the Root part.

data-pattern - Reflects the pattern prop on the Root part.

data-readonly - Reflects the readonly prop on the Root part.

data-required - Reflects the required prop on the Root part.

Input

The native input synchronized by Input OTP.

Default element: input
Discovery hook: data-sw-input-otp-input
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-input-otp-input - Marks the Input part so Starwind Runtime can find it.

Group

Groups related Input OTP items.

Default element: div
Discovery hook: data-sw-input-otp-group
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-input-otp-group - Marks the Group part so Starwind Runtime can find it.

Slot

A character slot inside Input OTP.

Default element: div
Discovery hook: data-sw-input-otp-slot
Role: -

Props

Prop Type Default

index number -

Description: Configures the index option for the Slot part.
Kind: option
Targets: slot
Full type: number

caret React.ReactNode -

Description: Changes how the Slot part is rendered.
Kind: rendering
Targets: slot
Full type: React.ReactNode

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-input-otp-slot - Marks the Slot part so Starwind Runtime can find it.

Metadata

Attribute Value Description

data-index - Reflects the index prop on the Slot part.

Slot Char

The visible character rendered in a Input OTP slot.

Default element: span
Discovery hook: data-sw-input-otp-char
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-input-otp-char - Marks the Slot Char part so Starwind Runtime can find it.

Slot Caret

The caret shown inside the active Input OTP slot.

Default element: div
Discovery hook: data-sw-input-otp-caret
Role: -

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-input-otp-caret - Marks the Slot Caret part so Starwind Runtime can find it.

Separator

Separates groups of Input OTP items.

Default element: div
Discovery hook: data-sw-input-otp-separator
Role: separator

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-input-otp-separator - Marks the Separator part so Starwind Runtime can find it.

Runtime API

Factory: createInputOtp
Import: @starwind-ui/runtime/input-otp
Root hook: root data-sw-input-otp
Option props: defaultValue, disabled, form, id, maxLength, name, onValueChange, pattern, readOnly, required, value

Option Lifecycles

Option	Lifecycle
defaultValue	constructor-only
disabled	setter-backed
form	setter-backed
id	setter-backed
maxLength	refresh-required
name	setter-backed
onValueChange	constructor-only
pattern	constructor-only
readOnly	constructor-only
required	setter-backed
value	setter-backed

Runtime Setters

Method Target Description

setValue state: value Updates the current Input OTP value from Runtime code.

setDisabled prop: disabled Updates whether Input OTP is disabled from Runtime code.

setFormOptions props: form, id, name, required Updates Input OTP form-related options from Runtime code.

Form Participation

Fact	Value
Form props	form, id, name, required, value
Hidden input	input (text)
Field integration	Yes

Component Relationship

Input Otp Direct primitive

Changelog

View version history v1.0.0 3 releases

v1.0.0

Promoted this Primitive's vendoring version to the stable 1.0.0 baseline. Its existing API and Runtime behavior carry forward from the previous release.

v0.1.1

Marked generated React Primitive files as client modules so vendored installs preserve client boundaries in React server frameworks.
Kept generated React state-change callbacks and DOM events cancelable until the Runtime accepts the proposed state, then synchronized rendered state.

v0.1.0

Introduced segmented value state, keyboard and paste handling, form participation, and value-change events.

Layer Metadata

Input OTP Primitive uses createInputOtp. Styled components: Input Otp.

primitive Input OTP Primitive Input OTP Primitive uses createInputOtp. Styled components: Input Otp. Runtime primitive Primitive adapter Astro Primitive adapters React Primitive adapters input-otp Input OTP Form Value Control Controls that participate directly in form value submission. /docs/primitives/input-otp/ createInputOtp @starwind-ui/runtime/input-otp /docs/runtime/#create-input-otp root defaultValue disabled form id maxLength name onValueChange pattern readOnly required value raw-html astro react solid svelte vue HTML Astro React Solid Svelte Vue Raw HTML Render the InputOtp data-sw-* contract yourself, then initialize createInputOtp. html Use the Astro primitive adapter to render InputOtp anatomy with the Runtime wiring included. Use the React primitive adapter when InputOtp state participates in React rendering. tsx div data-sw-input-otp string Controls the current Input OTP value. Sets the initial Input OTP value for uncontrolled usage. boolean Disables the Root part. Associates the control with a form element. Sets the id used by the associated native control. number Configures the max length option for the Root part. Sets the submitted form field name. RegExp | string Configures the pattern option for the Root part. Marks the control as read-only. Marks the form control as required. (value: string, details: InputOtpValueChangeDetails) => void InputOtpValueChangeDetails Runs when the Input OTP value changes. runtime Marks the Root part so Starwind Runtime can find it. data-default-value prop Reflects the default value prop on the Root part. data-disabled Reflects the disabled prop on the Root part. data-form Reflects the form prop on the Root part. data-id Reflects the id prop on the Root part. data-max-length Reflects the max length prop on the Root part. data-name Reflects the name prop on the Root part. data-pattern Reflects the pattern prop on the Root part. data-readonly Reflects the readonly prop on the Root part. data-required Reflects the required prop on the Root part. data-value state Reflects the value state on the Root part. getValue setValue valueChange starwind:value-change setDisabled setFormOptions form, id, name, required input data-sw-input-otp-input Marks the Input part so Starwind Runtime can find it. group data-sw-input-otp-group Marks the Group part so Starwind Runtime can find it. slot data-sw-input-otp-slot index Configures the index option for the Slot part. caret React.ReactNode Changes how the Slot part is rendered. Marks the Slot part so Starwind Runtime can find it. data-index Reflects the index prop on the Slot part. slotChar span data-sw-input-otp-char Marks the Slot Char part so Starwind Runtime can find it. slotCaret data-sw-input-otp-caret Marks the Slot Caret part so Starwind Runtime can find it. separator data-sw-input-otp-separator Marks the Separator part so Starwind Runtime can find it. Root aria-disabled tabindex tabIndex Input autocomplete autoComplete class className inputmode inputMode maxlength readonly Group Slot Slot Char Slot Caret hidden Separator aria-hidden @starwind-ui/astro @starwind-ui/astro/input-otp Render a native OTP input and visual slots; runtime owns keyboard, paste, form reset, and slot state after hydration. @starwind-ui/react @starwind-ui/react/input-otp Bridge controlled value and disabled state through setters while preserving callback refs for value changes. Input Otp /docs/components/input-otp/ Direct primitive direct-primitive Styled component Input Otp

Input OTP Primitive

Anatomy

API Reference

Root

Props

Events

State

Data Attributes

Runtime hooks

State

Metadata

Input

Data Attributes

Runtime hooks

Group

Data Attributes

Runtime hooks

Slot

Props

Data Attributes

Runtime hooks

Metadata

Slot Char

Data Attributes

Runtime hooks

Slot Caret

Data Attributes

Runtime hooks

Separator

Data Attributes

Runtime hooks

Runtime API

Option Lifecycles

Runtime Setters

Form Participation

Related Styled Components

Changelog

v1.0.0

v0.1.1

v0.1.0