Checkbox

A control for toggling a boolean value. Styled automatically by @primus/ui-core.

Preview · Checkbox

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:280px">
  <label><input type="checkbox" /> Accept terms and conditions</label>
  <label><input type="checkbox" checked /> Subscribe to newsletter</label>
  <label><input type="checkbox" disabled /> Disabled option</label>
  <div data-field="error">
    <label><input type="checkbox" aria-invalid="true" /> I agree to the terms</label>
    <span class="error">You must accept the terms to continue.</span>
  </div>
</div>

React

import { PrimusCheckbox } from 'primus-react-ui';

<PrimusCheckbox label="Accept terms" />
<PrimusCheckbox label="Subscribe" defaultChecked />
<PrimusCheckbox label="Disabled" disabled />
<PrimusCheckbox label="With error" error="This field is required." />

Angular

<primus-checkbox label="Accept terms"></primus-checkbox>
<primus-checkbox label="Subscribe" [checked]="true"></primus-checkbox>
<primus-checkbox label="Disabled" [disabled]="true"></primus-checkbox>
<primus-checkbox label="With error" error="Required"></primus-checkbox>

Props

Prop	Type	Default	Description
label	string	''	Label text
checked	boolean	false	Checked state
disabled	boolean	false	Disabled
error	string	''	Error message

Accessibility

• Native <input type="checkbox"> — activated with Space key
• Label text is always announced by screen readers
• Indeterminate state: set inputRef.current.indeterminate = true (React) or [indeterminate]="true" (Angular)
• Group checkboxes inside <fieldset> + <legend> for screen reader context

Version history

See the Changelog for version history and breaking changes.