开关输入

开关输入用于选择一个布尔值。

导入#


import { InputSwitch } from 'primereact/inputswitch';

基本用法#

开关输入作为受控输入，使用 checked 和 onChange 属性。


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

预选#

启用 checked 属性会使组件初始显示为激活状态。


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

无效#

使用 p-invalid 类添加无效状态样式，以指示验证失败。


<InputSwitch className="p-invalid" />

禁用#

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


<InputSwitch disabled />

无障碍性#

屏幕阅读器

开关输入组件内部使用隐藏的原生复选框元素，并带有 switch 角色，该元素仅对屏幕阅读器可见。用于描述组件的值可以通过与 inputId 属性组合的 label 标签，或者使用 aria-labelledby、aria-label 属性提供。 inputId 属性或使用 aria-labelledby、aria-label 属性。


<label htmlFor="switch1">Remember Me</label>
<InputSwitch inputId="switch1" />

<span id="switch2">Remember Me</span>
<InputSwitch aria-labelledby="switch2" />

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

键盘支持

按键	功能
tab	将焦点移动到开关。
空格	切换选中状态。