Holo Switch

The <holo-switch> component is a form-associated toggle control that exposes role="switch" semantics instead of checkbox semantics.

When to use

Use it for:

• Turning a setting on or off with an immediate effect: “Dark mode”, “Email notifications”.
• A single binary state where “on” and “off” are clear.

Don’t use it for:

• Choices that apply only after a form is submitted. Use Checkbox.
• Choosing among more than two options. Use Radio or Select.
• Triggering an action. Use Button.

Live Previews

Off / On

<holo-switch label="Enable notifications"></holo-switch> <holo-switch label="Enable notifications" checked></holo-switch>

Disabled

<holo-switch label="Enable notifications" disabled></holo-switch>

Accessibility

The component renders a native <button type="button" role="switch"> with aria-checked, named by the label through aria-labelledby. Clicking the label text also toggles it. disabled is applied to the native button. The component is form-associated through ElementInternals: the value is submitted only while on, and required with the switch off reports “This field is required.”.

Key	Action
Tab	Moves focus to or from the switch
Space, Enter	Toggles the switch

• A visible focus ring is shown on the switch track with :focus-visible.
• The track uses border-control so its boundary meets 3:1 against the surface. State is shown by the thumb position as well as colour.
• The thumb transition only runs when prefers-reduced-motion: no-preference.

You provide:

• A label. Without it the switch has no accessible name.
• A label that stays the same whether the switch is on or off (“Notifications”, not “Turn notifications on”).

---

API Reference

Importing

import '@philbob-sideprojects/hololink-ui/holo-switch';

Properties

Property	Attribute	Type	Default	Description
checked	checked	boolean	false	Whether the switch is on (checked).
disabled	disabled	boolean	false	If true, the switch is disabled and non-interactive.
label	label	string	—	The visible label text for the switch.
name	name	string	—	The form field name submitted with the owning form.
required	required	boolean	false	If true, the owning form cannot submit unless the switch is on.
value	value	string	'on'	The form value submitted when the switch is on.

Events

Event	Detail	Description
holoChange	boolean	Emitted when the on/off state changes.

CSS custom properties

Property	Description
--holo-switch-off-bg	Track color when off.
--holo-switch-on-bg	Track color when on.
--holo-switch-radius	Corner radius of the track.
--holo-switch-text-color	Text color of the label.
--holo-switch-thumb-color	Color of the thumb.