Kotodama UI
指南
组件
低代码
Demo
指南
组件
低代码
Demo

Select

原生 <select> 封装。支持 size / status / 受控与非受控，读取 componentConfig.Select，placeholder 走 locale.Select.placeholder。

不是自定义浮层下拉 / Combobox；需要搜索或多选时另开组件，不要扩展本组件。

文档站 Demo 跟随 Rspress 明暗主题（亮色用 admin，暗色自动切 dark）。

基础用法

<Select
  placeholder="请选择状态"
  options={[
    { value: 'active', label: '启用' },
    { value: 'draft', label: '草稿' },
    { value: 'archived', label: '归档', disabled: true },
  ]}
  onChange={(value) => console.log(value)}
/>

实时演示

覆盖尺寸、错误态、禁用、受控清空，以及与 Form.Item 的校验联用。

当前值：（空）

尚未提交

与 Form 联用

onChange 直接传出 string，可被 Form.Item 注入 value / status / aria-* / onBlur。

<Form.Item name="status" label="状态" required>
  <Select
    options={[
      { value: 'active', label: '启用' },
      { value: 'draft', label: '草稿' },
    ]}
  />
</Form.Item>

多语言

未传 placeholder 时使用 locale 默认文案（zh-CN：请选择；en-US：Please select）。可通过 ConfigProvider locale 覆盖 Select.placeholder。

API

SelectProps

属性 类型 默认值 说明
options SelectOption[] — 选项列表（必填）
value string — 受控值；传 "" 回到 placeholder
defaultValue string "" 非受控初始值
placeholder string locale 未选中时的占位文案
disabled boolean — 禁用整个控件
size "sm" | "md" | "lg" "md" 可读 componentConfig.Select.size
status "default" | "error" "default" 校验错误态（Form 会注入）
name / id string — 原生属性
onChange (value: string) => void — 选中值变化
onBlur FocusEventHandler<select> — 失焦（Form blur 校验）
aria-invalid / aria-describedby / aria-required — — 无障碍，Form 可注入
className string — 追加类名

SelectOption

属性 类型 说明
label string 展示文案
value string 选项值（勿用空字符串，与 placeholder 冲突）
disabled boolean 禁用该选项
ON THIS PAGE