SelectButton

SelectButton 用于使用按钮从列表中选择单个或多个项目。

导入#


import { SelectButton } from 'primereact/selectbutton';

基本用法#

SelectButton 用作受控组件，具有 value 和 onChange 属性以及 options 集合。选项的标签和值分别使用 optionLabel 和 optionValue 定义。属性。optionLabel 的默认属性名称是 label，optionValue 的默认属性名称是 value。如果省略 optionValue 并且对象没有 value 属性，则对象本身将成为选项的值。请注意，当选项是简单的原始值（例如字符串数组）时，不需要 optionLabel 和 optionValue。

关闭

开启


<SelectButton value={value} onChange={(e) => setValue(e.value)} options={options} />

多选#

SelectButton 默认情况下只允许选择一项，启用 multiple 可以选择多项。在多选情况下，模型属性应为数组而不是单个值。

选项 1

选项 2

选项 3


<SelectButton value={value} onChange={(e) => setValue(e.value)} optionLabel="name" options={items} multiple />

模板#

选项支持使用 itemTemplate 属性进行模板化，该属性引用一个用于渲染内容的函数。请注意 optionLabel 的使用，虽然在视觉上没有渲染，但仍然需要用作列表键。


<SelectButton value={value} onChange={(e) => setValue(e.value)} itemTemplate={justifyTemplate} optionLabel="value" options={justifyOptions} />

无效#

无效状态使用 invalid 属性显示，以指示验证失败。在与表单验证库集成时，可以使用此样式。

关闭

开启


<SelectButton invalid value={value} onChange={(e) => setValue(e.value)} options={options} />

禁用#

当存在 disabled 时，元素完全不能编辑和聚焦。也可以使用 optionDisabled 属性禁用某些选项。

关闭

开启

选项 1

选项 2


<SelectButton disabled options={options1} />
<SelectButton value={value} onChange={(e) => setValue(e.value)} options={options2} optionLabel="name" optionDisabled="constant" />

辅助功能#

屏幕阅读器

包装按钮的容器元素具有 group 角色，而每个按钮元素使用 button 角色，并且 aria-pressed 根据选择状态进行更新。用于描述选项的值使用引用选项标签的 aria-label 属性自动设置，因此即使选项显示仅包含图标等展示性内容，仍然建议定义标签。

键盘支持

按键	功能
tab	将焦点移动到按钮。
space	切换按钮的选中状态。