复选框

复选框是标准复选框元素的扩展，带有主题。

导入#


import { Checkbox } from 'primereact/checkbox';

基本#

复选框用作受控输入，具有 checked 和 onChange 属性。


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

组#

多个复选框可以组合在一起。

奶酪

蘑菇

辣椒

洋葱


<div className="flex flex-wrap justify-content-center gap-3">
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient1" name="pizza" value="Cheese" onChange={onIngredientsChange} checked={ingredients.includes('Cheese')} />
        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient2" name="pizza" value="Mushroom" onChange={onIngredientsChange} checked={ingredients.includes('Mushroom')} />
        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient3" name="pizza" value="Pepper" onChange={onIngredientsChange} checked={ingredients.includes('Pepper')} />
        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient4" name="pizza" value="Onion" onChange={onIngredientsChange} checked={ingredients.includes('Onion')} />
        <label htmlFor="ingredient4" className="ml-2">Onion</label>
    </div>
</div>

动态#

可以使用值列表生成复选框。

会计

市场营销

生产

研究


{categories.map((category) => {
    return (
        <div key={category.key} className="flex align-items-center">
            <Checkbox inputId={category.key} name="category" value={category} onChange={onCategoryChange} checked={selectedCategories.some((item) => item.key === category.key)} />
            <label htmlFor={category.key} className="ml-2">{category.name}</label>
        </div>
    );
})}

无效#

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


<Checkbox invalid={!checked} onChange={(e) => setChecked(e.checked)} checked={checked}></Checkbox>

填充#

将 variant 属性指定为 filled 以显示组件，使其视觉效果比默认的 outlined 样式更突出。


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

禁用#

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


<Checkbox checked disabled></Checkbox>

可访问性#

屏幕阅读器

复选框组件内部使用一个隐藏的本机复选框元素，该元素仅对屏幕阅读器可见。描述组件的值可以通过 label 标签与 inputId 属性结合使用或使用 aria-labelledby，aria-label 属性提供。


<label htmlFor="chkbox1">Remember Me</label>
<Checkbox inputId="chkbox1" />

<span id="chkbox2">Remember Me</span>
<Checkbox aria-labelledby="chkbox2" />

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

键盘支持

键	功能
tab	将焦点移动到复选框。
空格键	切换选中状态。