Combobox
带筛选列表的胶囊输入框:高亮匹配项、异步结果、多选时显示标签、可新建。
<div className="w-320">
<Combobox label="Model" options={options} placeholder="Search models" emptyText="No models match" defaultValue="gpt-5" />
</div>import { Combobox } from "@logicplanes/kaeso-ui";属性
aria-labelstring无障碍名称,用于没有可见标签的情况。
defaultValuestring | string[] | null非受控时,首次渲染时的值。
descriptionReactNode标签下方的一句帮助文字。
disabledboolean将其禁用:无法使用,并显示为变暗。
emptyTextReactNode列表为空时显示的文字:“没有匹配的模型”。默认为 LocaleProvider 语言中的“无结果”。
idstring控件的 ID,便于其他位置的标签指向它。
invalidboolean显示为无效;请搭配说明如何修正的消息。
labelReactNode可见标签。
layout"horizontal" | "vertical"标签位于控件上方(
vertical)或旁边(horizontal)。loadingboolean在列表顶部显示一条低调的进度线(异步结果)。
multipleboolean允许选择多个选项;此时
value为列表。namestring在表单中提交值时使用的字段名。
onCreate((label: string) => void)没有完全匹配时提供“新建“…””。
onInputValueChange((value: string) => void)调用时传入输入框中键入的文字。
onValueChange((value: string | null) => void) | ((value: string[]) => void)调用时传入所选值,使用
multiple时传入值列表。optionalboolean在标签后加上“可选”,用于大多数字段为必填的表单。
optionsComboboxOption[]可供选择的选项。
placeholderstring没有值时显示的文字。
requiredboolean在表单中将其标记为必填。
size"md" | "sm" | "lg" | "xl"输入框的高度。
valuestring | string[] | null受控时的所选值,使用
multiple时为值列表。