Toggle

The inherited Ecology switch, wearing the Beacon skin. An on/off control for instant settings; the track fills with brand teal when checked because the theme re-points --color-background-brand.

Inheritedwcimport '@esa/ecology/esa-switch-toggle';

Preview

<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>

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.