Resident number inputkr

Korean resident registration number field with a masked back part, reveal on demand, shape validation and a masked display part.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/resident-number-input

의존 아이템digit-input input input-group locale style

Default

resident-number-input-demo.tsx

"use client";
import * as React from "react";import { ResidentNumberInput, type ResidentNumberValue } from "@/components/ui/resident-number-input";
export default function ResidentNumberInputDemo() {  const [value, setValue] = React.useState<ResidentNumberValue>({ front: "", back: "" });  return (    <div className="w-80">      <ResidentNumberInput value={value} onValueChange={setValue} />    </div>  );}