Digit inputkr

Hook that keeps a digits-only value behind a formatted text field with caret-safe editing, paste, IME composition and separator-aware deletion.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/digit-input

의존 아이템style

Default

Value: empty

digit-input-demo.tsx

"use client";
import * as React from "react";import { Input } from "@/components/ui/input";import { useDigitInput } from "@/lib/digit-input";
function groupByThree(digits: string): string {  return digits.replace(/(\d{3})(?=\d)/g, "$1-");}
export default function DigitInputDemo() {  const [digits, setDigits] = React.useState("");  const { inputRef, handlers } = useDigitInput({ digits, maxDigits: 9, format: groupByThree, onDigitsChange: setDigits });  return (    <div className="flex w-64 flex-col gap-2">      <Input ref={inputRef} aria-label="Code" inputMode="numeric" {...handlers} />      <p className="text-sm text-muted-foreground">Value: {digits || "empty"}</p>    </div>  );}