Input OTP

1import { InputOTP, InputOTPSlot, InputOTPSeparator } from "@/components/ui/input-otp";
2
3<InputOTP />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { PinInput as ArkPinInput } from "@ark-ui/react/pin-input";
5import type React from "react";
6import { cn } from "@/lib/utils";
7import { Input, type InputProps } from "@/registry/react/components/input";
8
9interface InputOTPProps
10  extends React.ComponentProps<typeof ArkPinInput.Root>,
11    Pick<InputProps, "size"> {}
12
13export const InputOTP = (props: InputOTPProps) => {
14  const { placeholder, otp = true, className, children, ...rest } = props;
15
16  return (
17    <ArkPinInput.Root
18      className="group/input-otp"
19      data-slot="input-otp"
20      otp={otp}
21      placeholder={placeholder ?? ""}
22      {...rest}
23    >
24      <ArkPinInput.Control
25        className={cn(
26          "flex items-center gap-2",
27          "*:data-[slot=input-otp-input]:size-9",
28          className