注目新着
トグル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 that shows a spinner and waits for the server before committing the new state.
<!--
A switch that persists to a server must not lie: it stays on its old value
until the write resolves. This is the pending frame - role="switch" with
aria-busy="true" and disabled, a spinner riding in the thumb, so the state is
never guessed from an optimistic colour flip.
-->
<button type="button" role="switch" aria-checked="false" aria-busy="true" disabled class="inline-flex cursor-progress items-center gap-3">
<span aria-hidden="true" class="relative h-6 w-11 shrink-0 rounded-full bg-gray-300 opacity-70 dark:bg-gray-600">
<span class="absolute left-0.5 top-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow">
<span class="h-3 w-3 animate-spin rounded-full border-2 border-gray-300 border-t-blue-600 motion-reduce:animate-none"></span>
</span>
</span>
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">Sync to cloud</span>
</button>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
defaultChecked | boolean | false | Default checked |
onCommit必須 | (checked: boolean) => Promise<void> | - | On commit |
className | string | - | ルート要素にマージされる追加クラス。 |
It stays on its old value until `onCommit` resolves - `aria-busy` and a thumb spinner mark the pending frame, so the UI never lies with an optimistic flip. Wire `onCommit` to your persistence call and it reverts automatically on rejection.