Switch Toggle

An on/off switch for instant settings — a native

<esa-switch-toggle label="Email notifications" checked></esa-switch-toggle>

Sizes

<esa-switch-toggle label="Extra small" size="xs" checked></esa-switch-toggle>
<esa-switch-toggle label="Small" size="sm" checked></esa-switch-toggle>
<esa-switch-toggle label="Medium" size="md" checked></esa-switch-toggle>
<esa-switch-toggle label="Large" size="lg" checked></esa-switch-toggle>

Label position

Place the label after the track (default) or before it.

<esa-switch-toggle label="Label after" checked></esa-switch-toggle>
<esa-switch-toggle label="Label before" label-position="before" checked></esa-switch-toggle>

States

<esa-switch-toggle label="Off"></esa-switch-toggle>
<esa-switch-toggle label="On" checked></esa-switch-toggle>
<esa-switch-toggle label="Disabled" disabled></esa-switch-toggle>
<esa-switch-toggle label="Disabled + on" disabled checked></esa-switch-toggle>

Form participation

A checked switch submits on under its name; off submits nothing. Submitting logs the alerts entry.

<form>
  <esa-switch-toggle label="Enable alerts" name="alerts" checked></esa-switch-toggle>
  <button type="submit">Submit</button>
</form>

API

Prop	Type	Default	Description
`label`	`string`	`''`	Text rendered beside the track.
`checked`	`boolean`	`false`	On/off state of the switch.
`label-position`	`'before' \| 'after'`	`'after'`	Whether the label sits before or after the track.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Track and thumb size.
`disabled`	`boolean`	`false`	Disables interaction.

Events

Event	Type	Default	Description
`change`	`CustomEvent<{ checked: boolean }>`	—	Fired when toggled. Composed and bubbling; detail.checked is the new state.