Combobox

带筛选列表的胶囊输入框:高亮匹配项、异步结果、多选时显示标签、可新建。

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

属性

  • aria-label
    string

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

  • defaultValue
    string | string[] | null

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

  • description
    ReactNode

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

  • disabled
    boolean

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

  • emptyText
    ReactNode

    列表为空时显示的文字:“没有匹配的模型”。默认为 LocaleProvider 语言中的“无结果”。

  • id
    string

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

  • invalid
    boolean

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

  • label
    ReactNode

    可见标签。

  • layout
    "horizontal" | "vertical"

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

  • loading
    boolean

    在列表顶部显示一条低调的进度线(异步结果)。

  • multiple
    boolean

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

  • name
    string

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

  • onCreate
    ((label: string) => void)

    没有完全匹配时提供“新建“…””。

  • onInputValueChange
    ((value: string) => void)

    调用时传入输入框中键入的文字。

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

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

  • optional
    boolean

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

  • options
    ComboboxOption[]

    可供选择的选项。

  • placeholder
    string

    没有值时显示的文字。

  • required
    boolean

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

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

    输入框的高度。

  • value
    string | string[] | null

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