3c:T15c0,

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from "@/components/ui/input-otp"

const Demo = () => (
  <InputOTP length={6} aria-label="Verification code">
    <InputOTPGroup>
      <InputOTPSlot />
      <InputOTPSlot />
      <InputOTPSlot />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot />
      <InputOTPSlot />
      <InputOTPSlot />
    </InputOTPGroup>
  </InputOTP>
)

export default Demo

39:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3c"}}],"$L3d"]}] 3e:T3253,

"use client"

import { OTPField as OTPFieldPrimitive } from "@base-ui/react/otp-field"

import { cn } from "@/lib/utils"

const InputOTP = ({ className, ...props }: OTPFieldPrimitive.Root.Props) => (
  <OTPFieldPrimitive.Root
    data-slot="input-otp"
    className={cn("flex items-center gap-8 has-disabled:opacity-50", className)}
    {...props}
  />
)

const InputOTPGroup = ({
  className,
  ...props
}: React.ComponentProps<"div">) => (
  <div
    data-slot="input-otp-group"
    className={cn("flex items-center gap-4", className)}
    {...props}
  />
)

const InputOTPSlot = ({
  className,
  ...props
}: OTPFieldPrimitive.Input.Props) => (
  <OTPFieldPrimitive.Input
    data-slot="input-otp-slot"
    className={cn(
      "size-48 rounded-12 bg-glass-background-control text-center text-feature-bold text-text-primary caret-text-primary shadow-glass-control backdrop-glass-thin outline-none ring-inset focus:ring-2 focus:ring-text-primary disabled:cursor-not-allowed aria-invalid:ring-2 aria-invalid:ring-border-negative",
      className
    )}
    {...props}
  />
)

const InputOTPSeparator = ({
  className,
  ...props
}: React.ComponentProps<"div">) => (
  <div
    data-slot="input-otp-separator"
    role="separator"
    className={cn("h-2 w-8 rounded-full bg-border-tertiary", className)}
    {...props}
  />
)

export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }

3b:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$3e"}}],"$L3f"]}]

Installation

Usage