Bank account fieldkr

Searchable Korean bank select, grouped account number and holder name with an optional verification adapter and a masking helper.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/bank-account-field

의존 아이템button combobox digit-input input locale style

Default

Account: empty

bank-account-field-demo.tsx

"use client";
import * as React from "react";import { BankAccountField, maskAccountNumber, type BankAccountValue } from "@/components/ui/bank-account-field";
export default function BankAccountFieldDemo() {  const [value, setValue] = React.useState<BankAccountValue>({ bankCode: "", accountNumber: "", holder: "" });  return (    <div className="flex w-80 flex-col gap-2">      <BankAccountField name="refund" value={value} onValueChange={setValue} />      <p className="text-sm text-muted-foreground">Account: {maskAccountNumber(value.accountNumber) || "empty"}</p>    </div>  );}