精选最新
开关Basic Switch
A labelled on/off switch built on a real checkbox with `role="switch"`, driven entirely by CSS.
#toggle#switch#checkbox
3 个框架初级
Loading…
A switch whose check and cross icons swap with state, so it reads in pure greyscale.
<!--
Same sibling-flat structure as the labeled switch, but a check/cross SVG stands
in for the ON/OFF text. The icon is the state, so the control is legible even
to someone who cannot tell the two track colours apart. Icons are aria-hidden;
the input's aria-label is the real name.
-->
<label class="relative inline-flex h-7 w-14 shrink-0 cursor-pointer items-center">
<input type="checkbox" role="switch" aria-label="Autoplay" class="peer sr-only" checked />
<span
aria-hidden="true"
class="absolute inset-0 rounded-full bg-gray-400 transition-colors peer-checked:bg-emerald-600 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-emerald-600 dark:bg-gray-600 dark:peer-checked:bg-emerald-500 dark:peer-focus-visible:outline-emerald-400"
></span>
<svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="3" class="pointer-events-none absolute left-1.5 h-3 w-3 text-white opacity-0 peer-checked:opacity-100"><path d="M4 10l4 4 8-9" stroke-linecap="round" stroke-linejoin="round" /></svg>
<svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="3" class="pointer-events-none absolute right-1.5 h-3 w-3 text-gray-100 peer-checked:opacity-0"><path d="M5 5l10 10M15 5L5 15" stroke-linecap="round" /></svg>
<span aria-hidden="true" class="pointer-events-none absolute left-1 h-5 w-5 rounded-full bg-white shadow transition-transform peer-checked:translate-x-7 motion-reduce:transition-none"></span>
</label>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 加载时朗读的无障碍标签。 |
defaultChecked | boolean | false | Default checked |
onChange | (checked: boolean) => void | - | On change |
The check/cross SVGs stand in for ON/OFF text and are `aria-hidden`; the real name rides on the input `aria-label`. Replace the paths with sun/moon or lock/unlock without touching the sliding thumb.