material-switch

MD3 switch — 52×32 track; handle grows on selection (16→24) and press (→28); optional handle icon; form-associated with label, help, error, required, readonly.

default
with icon
icon both states
label / help / error
compare in a row
required
readonly
disabled
form 
submit to see FormData
rtl
Sample usage 
<!-- basic on/off -->
<material-switch></material-switch>
<material-switch checked></material-switch>

<!-- icon shown only when on -->
<material-switch icon="check" checked></material-switch>

<!-- icon in both states (handle stays 24dp) -->
<material-switch icon="check" icon-unchecked="close"></material-switch>

<!-- form-associated, with label / help / error -->
<material-switch
  name="notifications" value="on" checked
  label="Notifications" help-text="Get email when something changes."
></material-switch>

<!-- required: setValidity blocks submit when off -->
<material-switch label="Accept terms" required></material-switch>

<!-- error state -->
<material-switch label="Sync" error error-text="Sync failed."></material-switch>

<!-- events -->
<!-- checkedChange: { checked: boolean } on toggle -->

Forced colors (Windows High Contrast)

forced-colors: active (DevTools ▸ Rendering ▸ Emulate CSS media feature forced-colors) swaps the track border to CanvasText, selected to Highlight, disabled to GrayText. The handle keeps an explicit outline so it stays visible against the track.