XiodUI
HomeDocs
OverviewComponentsStyling & CustomizationChangelog

Components

  • Accordion
  • Agent Steps
  • Alert
  • Alert Dialog
  • Aspect Ratio
  • Autocomplete
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Button Group
  • Button Split
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Circular Progress
  • Collapsible
  • Color Picker
  • Combobox
  • Command
  • Context Menu
  • Copy To Clipboard
  • Corner Badge
  • Dashboard Grid
  • Date Picker
  • Dialog
  • Dot Matrix
  • Draggable
    Updated
  • Drawer
  • Empty
  • Field
  • Fieldset
  • File Upload
    Updated
  • Form
  • Frame
  • Gauge
  • Grid
  • Group
  • Input
  • Input Group
  • Input OTP
  • Input Payment
  • Input Phone
    Updated
  • Input Sensitive
  • Kbd
  • Kinetic Click
  • Label
  • List Box
    Updated
  • Loader
  • Marker
  • Menu
  • Menubar
  • Message
  • Meter
  • Morphic Toast
  • Navigation Menu
  • Number Field
  • Option Picker
  • Orb
  • Pagination
  • Popover
  • Preview Card
    Updated
  • Progress
  • Radio
  • Resizable
  • Ruler Picker
  • Scroll Area
  • Scroll Bar
  • Select
  • Separator
  • Sidebar
  • Skeleton
  • Slider
  • Sortable
  • Switch
  • Table
  • Tabs
  • Text
  • Textarea
  • Timeline
  • Toast
  • Toggle
  • Toggle Group
  • Toolbar
  • Tooltip
  • Waveform
  • Wheel Picker

Loading...

Preview Skeleton

Installation Skeleton

Usage Skeleton

API Reference Skeleton

Sponsors

Support the development of XiodUI and help us build the best component library on Earth.

+++
Sponsor on GitHub

Input OTP

Previous: Input GroupNext: Input Payment

A one-time code input with a separate box for each character.

Preview

Loading Preview...

Installation

bun add xiod-ui

Usage

Imports

1import {2  InputOtp,3  InputOtpGroup,4  InputOtpInput,5  InputOtpSeparator6} from "xiod-ui/input-otp";

Anatomy

1<InputOtp>2  <InputOtpGroup>3    <InputOtpInput />4  </InputOtpGroup>5  <InputOtpSeparator />6</InputOtp>

API Reference

Detailed documentation of properties and options.

InputOtp

alias: OTPField

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
lengthReq
number
–

The number of OTP input slots. Required so the root can clamp values, detect completion, and generate consistent validation markup before all slots hydrate.

autoComplete
string
'one-time-code'

The input autocomplete attribute. Applied to the first slot and hidden validation input.

autoSubmit

InputOtpGroup

alias: OTPFieldGroup

Accepts render, plus every native <div> attribute.

InputOtpInput

alias: OTPFieldInput

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
inputClassName
string
–

Classes for the <input> inside the box, for example to change the text.

InputOtpSeparator

alias: OTPFieldSeparator

Accepts className, style and render, plus every native attribute of the element it renders.

PropTypeDefaultDescription
icon
ReactNode
–

Replaces this icon. Accepts any node; null renders no icon. Takes precedence over IconProvider.

orientation
Input GroupInput Payment
boolean
false

Whether to submit the owning form when the OTP becomes complete.

defaultValue
string
–

The uncontrolled OTP value when the component is initially rendered.

disabled
boolean
false

Whether the component should ignore user interaction.

form
string
–

A string specifying the form element with which the hidden input is associated. This string's value must match the id of a form element in the same document.

id
string
–

The id of the first input element. Subsequent inputs derive their ids from it ({id}-2, {id}-3, and so on).

inputMode
"search"|"text"|"none"|"tel"|"url"|"email"|"numeric"|"decimal"
–

The virtual keyboard hint applied to the slot inputs and hidden validation input.

Built-in validation modes provide sensible defaults, but you can override them when needed.

mask
boolean
false

Whether the slot inputs should mask entered characters. Pass type directly to individual <OTPField.Input> parts to use a custom input type.

name
string
–

Identifies the field when a form is submitted.

normalizeValue
((value: string) => string)
–

Function that normalizes the OTP value after whitespace and validationType filtering. It runs whenever OTP Field normalizes a value, including initial/default values, controlled values, and user edits.

The returned value is filtered by validationType again, then clamped to length. It should be idempotent because OTP Field may normalize the same value more than once while handling edits, storing state, and rendering controlled or uncontrolled values. Non-idempotent normalizers can compound across those normalization passes. Characters rejected while normalizing typed or pasted text are reported through onValueInvalid.

onValueChange
((value: string, eventDetails: OTPFieldRootChangeEventDetails) => void)
–

Callback fired when the OTP value changes.

The eventDetails.reason indicates what triggered the change:

  • 'input-change' for typing or autofill
  • 'input-clear' when a character is removed by text input
  • 'input-paste' for paste interactions
  • 'keyboard' for keyboard interactions that change the value
onValueComplete
((value: string, eventDetails: OTPFieldRootCompleteEventDetails) => void)
–

Callback function that is fired when the OTP value becomes complete, or when a complete value is pasted while the OTP is already complete.

When the value changes, it runs later than onValueChange, after the internal value update is applied. If a complete pasted value matches the current value, onValueChange does not fire.

If autoSubmit is enabled, it runs immediately before the owning form is submitted.

onValueInvalid
((value: string, eventDetails: OTPFieldRootInvalidEventDetails) => void)
–

Callback fired when entered text contains characters that are rejected by validation or normalization before the OTP value updates.

The value argument is the attempted user-entered string before normalization.

readOnly
boolean
false

Whether the user should be unable to change the field value.

required
boolean
false

Whether the user must enter a value before submitting a form.

validationType
"none"|"alpha"|"numeric"|"alphanumeric"
'numeric'

The type of input validation to apply to the OTP value.

value
string
–

The OTP value.

"horizontal"|"vertical"
'horizontal'

The orientation of the separator.