Select

打开菜单面板中列表的胶囊:已选项带勾号,支持分组和输入跳转。

查看源码
import { Select } from "@logicplanes/kaeso-ui";

属性

  • appearance
    "ghost" | "default" | "header"

    填充字段(default)、用于工具栏的低调字段(ghost),或用于列标题、使用完整文字颜色的低调字段(header)。

  • aria-label
    string

    无障碍名称,用于没有可见标签的情况。

  • defaultValue
    string | string[] | null

    非受控时,首次渲染时的值。

  • description
    ReactNode

    标签下方的一句帮助文字。

  • disabled
    boolean

    将其禁用:无法使用,并显示为变暗。

  • fullWidth
    boolean

    触发器宽度跟随内容(默认)或占满容器。

  • icon
    IconSvgElement

    触发器中的前置图标。

  • id
    string

    控件的 ID,便于其他位置的标签指向它。

  • invalid
    boolean

    显示为无效;请搭配说明如何修正的消息。

  • label
    ReactNode

    可见标签。

  • layout
    "horizontal" | "vertical"

    标签位于控件上方(vertical)或旁边(horizontal)。

  • multiple
    boolean

    允许选择多个选项;此时 value 为列表。

  • name
    string

    在表单中提交值时使用的字段名。

  • onOpenChange
    ((open: boolean) => void)

    列表打开或关闭时调用。

  • onValueChange
    ((value: string) => void) | ((value: string[]) => void)

    调用时传入所选值,使用 multiple 时传入值列表。

  • open
    boolean

    受控时,列表是否打开。

  • optional
    boolean

    在标签后加上“可选”,用于大多数字段为必填的表单。

  • options
    SelectOption[]

    可供选择的选项。

  • placeholder
    ReactNode

    默认为 LocaleProvider 语言中的“选择”。

  • required
    boolean

    在表单中将其标记为必填。

  • size
    "md" | "sm" | "lg" | "xl"

    字段的高度。

  • value
    string | string[] | null

    受控时的所选值,使用 multiple 时为值列表。