On this page

InputOtp Primitive

InputOtp is a Starwind Runtime primitive in the form-value-control contract family.

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 InputOtp Runtime instance.

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

Props

Prop Type Default

value string -

Description: Controls the current InputOtp value.
Kind: control
Targets: -
Full type: string

defaultValue string -

Description: Sets the initial InputOtp value for uncontrolled usage.
Kind: control
Targets: -
Full type: string

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 InputOtp value changes.
Kind: callback
Targets: -
Full type: (value: string, details: InputOtpValueChangeDetails) => void

Events

Event Callback Value

valueChange onValueChange value: string

Description: Fires when the value changes for InputOtp.
DOM event: starwind:value-change
Details type: InputOtpValueChangeDetails
Timing: -
Cancelable: No

State

State Type Props

value string value / defaultValue

Description: Tracks the current InputOtp value.
Initial attribute: data-value
Runtime getter: getValue
Runtime setter: setValue
State control support: React supports controlled and default state with value and defaultValue props. Runtime/HTML reads initial state from data-value, emits starwind:value-change, and updates with setValue. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

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 InputOtp.

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 InputOtp 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 InputOtp.

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 InputOtp 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 InputOtp 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 InputOtp 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 InputOtp value from Runtime code.

setDisabled prop: disabled Updates whether InputOtp is disabled from Runtime code.

setFormOptions props: form, id, name, required Updates InputOtp 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

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 InputOtp value. Sets the initial InputOtp 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 InputOtp 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. /docs/components/input-otp/ Direct primitive direct-primitive Styled component Input Otp

InputOtp 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