Live demo — this example is server-driven; run the showcase locally for the interactive version.

Switch

A binary on/off toggle that takes effect immediately. Use Switch (vs. Checkbox) when the change is applied without a separate "Save" step — settings, preferences, feature toggles.

Examples

Basic

Default switch with a label.

Enable notifications

Checked

checked=true — starts in the on position.

Already on

Disabled

Disabled — both states; user can't toggle.

Disabled off Disabled on

Reversed

reversed=true — label appears before the toggle (pf-m-reverse).

Label first, then the toggle

Without label

Aria-labelled toggle with no visible text.

Label and check icon

The check glyph renders inside the toggle and the label carries pf-m-on.

Togglable option in check icon example

Documentation

Switch props

Parameters accepted by {#include components/forms/switch ... /}. Model mode: pass sw=<Switch> built in Java instead — the Java tab on each example shows the builder.

* required
Name	Type	Description
* `id`	String	Wrapper id; inner input gets `{id}-field`.
`label`	String	Visible label next to the toggle.
`checked` / `disabled`	boolean	Standard HTML form attrs.
`reversed`	boolean	Adds `pf-m-reverse` — label before toggle.

Usage

Switch vs. Checkbox. Switch is for immediate-effect settings (toggle wifi, enable feature). Checkbox is for batched form decisions (terms accepted, options selected before submit).

HTMX pairing. Pair with hx-post on change so the server commits the setting immediately and returns a partial.

Edit switch.html on GitHub