开关按钮

开关按钮用于使用按钮选择布尔值。

导入#


import { ToggleButton } from 'primereact/togglebutton';

基本#

开关按钮用作具有 value 和 onChange 属性的受控输入组件。

否


<ToggleButton checked={checked} onChange={(e) => setChecked(e.value)} />

自定义#

可以使用 onLabel、offLabel、onIcon 和 offIcon 属性自定义图标和标签。

我拒绝


<ToggleButton onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" 
    checked={checked} onChange={(e) => setChecked(e.value)} />

无效#

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

否


<ToggleButton invalid onIcon="pi pi-check" offIcon="pi pi-times" checked={checked} onChange={(e) => setChecked(e.value)} />

禁用#

当存在 disabled 时，无法编辑和聚焦该元素。

否


<ToggleButton disabled checked={checked} onChange={(e) => setChecked(e.value)} />

可访问性#

屏幕阅读器

开关按钮组件使用具有 button 角色的元素，并为屏幕阅读器更新 aria-pressed 状态。可以使用 aria-labelledby 或 aria-label 属性定义描述组件的值，强烈建议使用其中一个属性，因为组件会更改显示的标签，这会导致屏幕阅读器在组件获得焦点时读取不同的标签。为防止这种情况，请始终提供与状态无关的 aria 标签。


<span id="rememberme">Remember Me</span>
<ToggleButton aria-labelledby="rememberme" />

<ToggleButton aria-label="Remember Me" />

键盘支持

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