Switch

Switch toggles a boolean in a settings row. Sizes share Button/Input’s sm / md / lg enum; the track is shorter than field height.

Demos

Basic

Bind checked and listen for change with e.detail.checked. Provide an accessible name with aria-label when there is no visible label.

Notifications

<!-- host: const basicOn = ref(true); function onBasicChange(e: CustomEvent<{ checked: boolean }>) { basicOn.value = e.detail.checked } -->
<div class="settings-row">
  <span>Notifications</span>
  <gk-switch
    aria-label="Notifications"
    :checked="basicOn"
    @change="onBasicChange"
  ></gk-switch>
</div>

Size

Size enum matches Button and Input: sm, md, and lg. The track stays smaller than the 28 / 34 / 40 field heights.

<gk-switch size="sm" checked aria-label="Small"></gk-switch>
<gk-switch size="md" checked aria-label="Medium"></gk-switch>
<gk-switch size="lg" checked aria-label="Large"></gk-switch>

Disabled

disabled blocks toggling. An off switch stays subdued; an on switch keeps a readable track.

<gk-switch disabled aria-label="Disabled off"></gk-switch>
<gk-switch disabled checked aria-label="Disabled on"></gk-switch>

With label

Default slot text is the visible label and the accessible name. Use :round="false" for a squared track (pill is the default).

Email alertsSquared

<!-- host: const labelOn = ref(false); function onLabelChange(e: CustomEvent<{ checked: boolean }>) { labelOn.value = e.detail.checked } -->
<gk-switch :checked="labelOn" @change="onLabelChange">Email alerts</gk-switch>
<gk-switch checked :round="false">Squared</gk-switch>

Playground

Try combinations of props interactively.

Size smmdlg checked disabled round

Airplane mode

API

Switch Props

Prop	Type	Default
checked	boolean	false
size	'sm' | 'md' | 'lg'	'md'
disabled	boolean	false
round	boolean	true

round defaults to pill. In raw HTML a boolean attribute cannot express false; use the property or Vue :round="false".

Switch Slots

Name	Description
default	Optional visible label (also used as the accessible name)

Switch Events

Name	Description
change	User toggled the switch; bubbles; composed: true; detail: { checked: boolean }

Native input / change from a checkbox are not used. Bind Vue/Alpine to this CustomEvent only.

CSS Parts

Part	Description
track	The role="switch" control
thumb	Knob inside the track
label	Default-slot wrapper

Accessibility

• Inner control: role="switch" and aria-checked reflecting checked.
• Space and Enter toggle.
• Provide an accessible name via the default slot or aria-label.
• disabled prevents toggling.