新着
トグルLabeled Switch
A switch that prints ON/OFF inside the track so the state is legible without any colour.
#toggle#switch#on-off
3 個のフレームワーク初級
Loading…
A labelled on/off switch built on a real checkbox with `role="switch"`, driven entirely by CSS.
<!--
A switch is a checkbox wearing a different picture. role="switch" rides on the
real <input>, which keeps Space, form submission and label association for
free. The state is carried by the thumb's POSITION (translate-x), not only the
track colour, so it survives greyscale.
-->
<label class="inline-flex cursor-pointer items-center gap-3">
<input type="checkbox" role="switch" class="peer sr-only" checked />
<span
aria-hidden="true"
class="relative h-6 w-11 shrink-0 rounded-full bg-gray-300 transition-colors after:absolute after:left-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full after:bg-white after:shadow after:transition-transform after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-5 peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-blue-600 peer-disabled:opacity-50 motion-reduce:transition-none motion-reduce:after:transition-none dark:bg-gray-600 dark:peer-checked:bg-blue-500 dark:peer-focus-visible:outline-blue-400"
></span>
<span class="text-sm font-medium text-gray-900 peer-disabled:opacity-50 dark:text-gray-100">
Email notifications
</span>
</label>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
defaultChecked | boolean | false | Default checked |
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
onChange | (checked: boolean) => void | - | On change |
The thumb slides via `peer-checked:after:translate-x-5`, so the state reads by POSITION as well as colour and survives greyscale. It stays uncontrolled - the checkbox owns its value and you read it from `onChange` - so it ships no JS state.