Select
打开菜单面板中列表的胶囊:已选项带勾号,支持分组和输入跳转。
<div className="w-280">
<Select label="Log retention" options={retention} defaultValue="30" fullWidth />
</div>import { Select } from "@logicplanes/kaeso-ui";属性
appearance"ghost" | "default" | "header"填充字段(
default)、用于工具栏的低调字段(ghost),或用于列标题、使用完整文字颜色的低调字段(header)。aria-labelstring无障碍名称,用于没有可见标签的情况。
defaultValuestring | string[] | null非受控时,首次渲染时的值。
descriptionReactNode标签下方的一句帮助文字。
disabledboolean将其禁用:无法使用,并显示为变暗。
fullWidthboolean触发器宽度跟随内容(默认)或占满容器。
iconIconSvgElement触发器中的前置图标。
idstring控件的 ID,便于其他位置的标签指向它。
invalidboolean显示为无效;请搭配说明如何修正的消息。
labelReactNode可见标签。
layout"horizontal" | "vertical"标签位于控件上方(
vertical)或旁边(horizontal)。multipleboolean允许选择多个选项;此时
value为列表。namestring在表单中提交值时使用的字段名。
onOpenChange((open: boolean) => void)列表打开或关闭时调用。
onValueChange((value: string) => void) | ((value: string[]) => void)调用时传入所选值,使用
multiple时传入值列表。openboolean受控时,列表是否打开。
optionalboolean在标签后加上“可选”,用于大多数字段为必填的表单。
optionsSelectOption[]可供选择的选项。
placeholderReactNode默认为 LocaleProvider 语言中的“选择”。
requiredboolean在表单中将其标记为必填。
size"md" | "sm" | "lg" | "xl"字段的高度。
valuestring | string[] | null受控时的所选值,使用
multiple时为值列表。