CountrySelect
country-select国家/地区选择 · 内置 250 国(旗+中英文名+区号) + 单/多选 chips + 中英文/码/区号搜索 · dogfood Combobox(新增多选)
用法
基础用法
单选国家/地区，搜索按中文/英文/码/区号全字段匹配。
tsx
<CountrySelect defaultValue="CN" className="w-72" />显示区号
showDialCode 在下拉行右侧补国际区号。
tsx
<CountrySelect defaultValue="US" showDialCode className="w-72" />多选（chips）
multiple 后已选项以 chips 回显，可继续搜索追加。
中国
美国
日本
tsx
<CountrySelect multiple defaultValue={["CN", "US", "JP"]} className="w-80" />尺寸
size 支持 sm / md / lg。
tsx
<>
<CountrySelect size="sm" defaultValue="GB" className="w-72" />
<CountrySelect size="lg" defaultValue="FR" className="w-72" />
</>禁用 / 无效态
disabled 屏蔽交互；invalid 触发器变 danger 描边。
tsx
<>
<CountrySelect disabled defaultValue="FR" className="w-72" />
<CountrySelect invalid className="w-72" />
</>何时用
选国家/地区时用，250 国数据（国旗 emoji + 中英文名 + 区号）已内置，支持中英文名/ISO 码/区号搜索。若选项是自定义扁平列表用 Combobox；若是中国省市区用 RegionCascader。
导入
ts
import { CountrySelect, getCountry, flagEmoji, countrySearchText, filterCountries, countries } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | string | string[] | — | 受控值：单选为 ISO2 码字符串；多选为码数组 |
| defaultValue | string | string[] | — | 非受控初值 |
| multiple | boolean | false | 多选（chips） |
| showEnglish | boolean | true | 选项行是否显示英文名 |
| showDialCode | boolean | false | 选项行是否显示国际区号 |
| placeholder | string | — | 触发器占位文案 |
| searchPlaceholder | string | — | 搜索框占位文案 |
| size | "sm" | "md" | "lg" | "md" | 触发器尺寸 |
| disabled | boolean | false | 禁用 |
| invalid | boolean | false | 无效态 |
| className | string | — | 透传到触发器 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onChange | (next: string | string[]) => void | 选择变更回调；单选回传 string，多选回传 string[] |
禁忌 / 坑
value/onChange入参在单选与多选下类型不同（stringvsstring[]），onChange 回调拿到的是联合类型，需按multiple用as收窄，别直接当数组用。- value 存的是 ISO2 码（如
"CN"），不是中文名；展示名用getCountry(code)现取。
相关
SecretField · Combobox · Listbox · Mentions · InputOTP · Rating
Playground
value：（空）
<CountrySelect value={code} onChange={setCode} showDialCode />
{/* 多选 */}
<CountrySelect multiple value={codes} onChange={setCodes} />