Segmented input

Fixed-length code input split into individual segments — one focusable box per segment. Typing auto-advances to the next segment, Backspace on an empty segment moves back. Ideal for OTP / verification codes and PINs.

Live Demo

Basic (OTP)

Value: —

Custom segment count and size

Two characters per segment, four segments:

Value: —

Text segments

type="string" accepts any character:

Value: —

Boundary events

start fires when Backspace steps before the first segment, end when focus moves past the last one:

Last boundary event: none

Usage

Basic

<template>
  <orio-segmented-input v-model="code" />
</template>

<script setup>
const code = ref("");
</script>

Custom segment count and size

<orio-segmented-input v-model="licenseKey" :segments="4" :segment-size="2" />

Text segments

<orio-segmented-input v-model="word" type="string" :segments="5" />

Boundary events

<orio-segmented-input
  v-model="code"
  @start="focusPreviousField()"
  @end="submitCode()"
/>

Props

Prop	Type	Default	Description
modelValue	string | number	""	Joined value of all segments (v-model)
segments	number | string	6	Number of segment boxes
segmentSize	number | string	1	Characters per segment
type	"number" | "string"	"number"	"number" rejects non-digit keys on typed input

Events

Event	Payload	Description
update:modelValue	string	Emitted with the joined segment values on every change
start	—	Backspace pressed while the first segment is empty
end	—	Focus moved past the last segment (all segments consumed)

Behavior notes

• The model is the plain concatenation of all segments — a 6-segment input with segmentSize: 1 produces a 6-character string when complete.
• Pasting into any segment writes the whole pasted text into the model at once. With type="number" non-digit characters are stripped first; the result is truncated to the total capacity (segments × segmentSize). A paste that fills every segment also emits end.
• With type="number" each segment renders with inputmode="numeric", so mobile devices show the digit keyboard.
• The first segment carries autocomplete="one-time-code", letting supported browsers offer SMS code autofill.

Styling

Segments are regular <orio-input> fields — they inherit its tokens:

--color-bg           /* Segment background */
--color-border       /* Border color */
--color-text         /* Text color */
--color-accent       /* Focus border color */
--color-accent-soft  /* Focus ring color */