Nude switch

Examples

Basic:

<input type="checkbox" class="nd-switch">

Bigger:

<input type="checkbox" class="nd-switch" style="font-size: 200%">

With larger and smaller thumb:

<input type="checkbox" class="nd-switch" style="--nd-thumb-margin: -.2em">
<input type="checkbox" class="nd-switch" style="--nd-thumb-margin: .2em">

Different colors:

<input type="checkbox" class="nd-switch" style="
	--nd-thumb-color: black;
	--nd-switch-color: white; border: 1px solid black;
	--nd-switch-color-checked: red
">

Right to left:

<input type="checkbox" class="nd-switch" dir="rtl">

Disabled:

<input type="checkbox" class="nd-switch" disabled>

@import url('https://nudeui.com/nd-switch/nd-switch.css');