台灣地址輸入
三級聯動縣市鄉鎮區選擇器，自動帶入郵遞區號，涵蓋全台 22 縣市 368 鄉鎮區。
Cascading city/district/postal code selector covering all 22 cities and 368+ districts in Taiwan with auto postal code lookup.
CLI
npx taiwan-ui add taiwan-address-inputnpm package
npm install @taiwan-ui/reactRequires: data/taiwan-postal.json
| Prop | Type | Default |
|---|---|---|
value* | TaiwanAddress | null | — |
onChange* | (address: TaiwanAddress | null) => void | — |
placeholder | string | "請輸入詳細地址" |
disabled | boolean | false |
required | boolean | false |
Non-editable type — edit in code.
目前地址值
街道地址佔位文字
停用所有輸入
標記為必填
import TaiwanAddressInput from "@/components/taiwan/TaiwanAddressInput";
export default function Example() {
return (
<TaiwanAddressInput
placeholder="請輸入詳細地址"
/>
);
}
import { useState } from "react";
import TaiwanAddressInput, { type TaiwanAddress } from "@/components/taiwan/TaiwanAddressInput";
export default function MyForm() {
const [address, setAddress] = useState<TaiwanAddress | null>(null);
return <TaiwanAddressInput value={address} onChange={setAddress} />;
}