Checkbox

Examples

Basic

Default unchecked checkbox with a label.

Accept terms

Checked

checked=true — initial state checked.

Already checked

Disabled

Disabled — both unchecked and pre-checked variants.

Disabled, unchecked Disabled, checked

Reversed

reversed=true renders label before input.

Label first, then the input

With description

A secondary line of muted text under the label.

Email me weekly digests Includes activity summary and recommended reads. You can unsubscribe at any time.

With body

The body slot — extra content under the label.

Customize delivery Choose hours and days for digest delivery (configurable after enabling).

Required

required=true appends the red "*" marker.

I agree to the terms

Standalone

standalone=true — no label. Pair with ariaLabel.

Controlled

Alpine reports the checked set (covers controlled/uncontrolled).

Alpha

Beta

Checked: none

Label wraps

Long labels wrap with the input on the first line.

A really long checkbox label that wraps onto multiple lines while the input stays aligned with the first line

With description and body

Both together.

With description and body A longer explanation of what checking this means. Extra body content — fine print or links can live here.

Documentation

Checkbox props

Parameters accepted by {#include components/forms/check ... /} — the runtime template is named check.html to mirror PF's .pf-v6-c-check class. Model mode: pass check=<Check> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	id of the input. Wrapper gets `{id}-wrap`.
`label`	String	Visible label. Required for non-standalone checkboxes.
`checked` / `disabled` / `required`	boolean	Standard HTML form attributes.
`description`	String	Secondary muted text under the label — wired with aria-describedby.
`body`	String (HTML)	Extra content under label/description.
`standalone`	boolean	No label — emits `pf-m-standalone`. Pair with `ariaLabel`.
`reversed`	boolean	Label before input via DOM order — PF v6 has no reversed modifier class.
`ariaLabel`	String	Accessible label for standalone checkboxes.

Usage

Checkbox vs. radio vs. switch. Checkbox for many independent on/off choices. Radio for one-of-many. Switch for binary settings that take effect immediately.

Standalone needs an aria-label. A checkbox with no label is invisible to screen readers — always set ariaLabel.

Edit check.html on GitHub