v2.0.0
Form

Input OTP

Captures one-time passcodes with grouped character slots.

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@line/abc-def-react/input-otp";
<script setup lang="ts">
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@line/abc-def-vue/input-otp";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

React shadcnVue shadcn

Basic usage

1
2
3
4
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@line/abc-def-react/input-otp";

export function Example() {
  return (
    <InputOTP maxLength={4} value="1234" readOnly>
      <InputOTPGroup>
        <InputOTPSlot index={0} />
        <InputOTPSlot index={1} />
        <InputOTPSlot index={2} />
        <InputOTPSlot index={3} />
      </InputOTPGroup>
    </InputOTP>
  );
}
<script setup lang="ts">
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@line/abc-def-vue/input-otp";
</script>

<template>
  <InputOTP :maxlength="4">
    <InputOTPGroup>
      <InputOTPSlot :index="0" />
      <InputOTPSlot :index="1" />
      <InputOTPSlot :index="2" />
      <InputOTPSlot :index="3" />
    </InputOTPGroup>
  </InputOTP>
</template>

Component tokens

Component TokenSemantic TokenDefault Primitive Token
--input-otp-slot-border--border-input--color-zinc-200
--input-otp-slot-border-active--ring--color-zinc-400
--input-otp-slot-border-destructive--destructive--color-red-50
--input-otp-slot-bg-darkLiteral valuecolor-mix(in oklab, var(--input) 30%, transparent)
--input-otp-slot-caret--foreground--color-zinc-950
--input-otp-group-ring-destructive--destructive--color-red-50
--input-otp-group-ring-destructive-shadow--destructive--color-red-50
--input-otp-slot-active-shadow--ring--color-zinc-400
--input-otp-slot-destructive-shadow--destructive--color-red-50

Composition exports

InputOTPInputOTPGroupInputOTPSlotInputOTPSeparator

Usage notes

  • Set a clear maximum length.
  • Support paste for full codes.
  • Related component tokens use the `input-otp` token group in `@line/abc-def-styles/css`.