选择框
可配置标签、尺寸与选项列表的下拉选择。
选项通过 SelectItem 的 id / children 配置;size、label、selectedKey 控制外观与受控状态。
地区
安装
npx @joyui/cli add select --yes或通过 JoyUI MCP / CLI 安装。
尺寸
md(默认)与 sm(表格等紧凑场景)。
地区 md
md地区 sm
sm应用场景
数据表格工具栏的多过滤器:地区 + 阶段,选项列表由业务数据驱动。
地区
阶段
API
Select
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| label | 标签。 | ReactNode | — | — |
| placeholder | 未选中文案。 | string | — | — |
| size | 密度。 | "sm" | "md" | sm · md | md |
| selectedKey | 受控选中。 | Key | — | — |
| onSelectionChange | 选中回调。 | (key) => void | — | — |
| className | 合并到根节点的额外类名。 | string | — | — |
SelectItem
| 字段 | 说明 | 类型 | 必填 | 示例 |
|---|---|---|---|---|
| id | 选项键。 | Key | 是 | "eu" |
| children | 展示内容。 | ReactNode | 是 | Europe |
| isDisabled | 禁用项。 | boolean | 否 | false |