Forge — 台灣本土化 React 元件庫

ROCDatePicker

民國日期選擇器 — Date picker with ROC (民國) year conversion and dual-calendar display.

disabledshowGregorianSubminDate / maxDate (current month)

Output

null

Usage

import ROCDatePicker from '@/components/taiwan/ROCDatePicker'

<ROCDatePicker
  value={date}
  onChange={setDate}
  showGregorianSub={true}
  minDate={new Date(2025, 0, 1)}
  maxDate={new Date(2025, 11, 31)}
/>

TWIDInput

身分證字號輸入 — Taiwan National ID / ARC number input with real-time checksum validation and region detection.

disabledshowRegion

Try: (valid) or (invalid)

Output

{
  "valid": false,
  "type": "invalid",
  "raw": ""
}

Usage

import TWIDInput from '@/components/taiwan/TWIDInput'

<TWIDInput
  value={idNumber}
  onChange={setIdNumber}
  onValidate={(result) => {
    // result.valid, result.type, result.region
  }}
  showRegion={true}
/>

TaiwanAddressInput

台灣地址輸入 — Cascading city/district selector with auto-filled 3-digit postal code. Covers all 22 cities and ~368 districts.

disabled

Output

{
  "postalCode": "",
  "city": "",
  "district": "",
  "streetAddress": ""
}

Usage

import TaiwanAddressInput from '@/components/taiwan/TaiwanAddressInput'

<TaiwanAddressInput
  value={address}
  onChange={setAddress}
  placeholder="請輸入詳細地址"
/>

TaiwanPaymentButton

台灣支付按鈕 — Branded payment buttons for LINE Pay and JKO Pay (街口支付) with loading states and size variants.

size:

With amount

Without amount

Disabled + Full width

Last event

{
  "provider": null,
  "timestamp": null
}

Usage

import TaiwanPaymentButton from '@/components/taiwan/TaiwanPaymentButton'

<TaiwanPaymentButton
  provider="linepay"   // 'linepay' | 'jkopay' | 'streetpay'
  amount={1250}
  onClick={(provider) => checkout(provider)}
  size="md"            // 'sm' | 'md' | 'lg'
  fullWidth={false}
/>

UniformInvoiceInput

統一發票號碼輸入 — Taiwan uniform invoice number input with auto-formatting (XX-XXXXXXXX) and validation.

disabled

Format: 2 uppercase letters + hyphen + 8 digits. Try:

Output

{
  "valid": false,
  "formatted": "",
  "raw": ""
}

Usage

import UniformInvoiceInput from '@/components/taiwan/UniformInvoiceInput'

<UniformInvoiceInput
  value={invoice}
  onChange={(value, result) => {
    // result.valid, result.formatted, result.raw
  }}
/>