注目新着
トグル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 sticky Follow/Following pill on one `aria-pressed` button whose label and icon change with state.
<!--
A single sticky on/off (Follow / Following) is one aria-pressed button. The
LABEL text itself changes with state and a check appears when pressed, so the
toggle never depends on the fill colour to be understood.
-->
<button type="button" aria-pressed="true" class="inline-flex items-center gap-1.5 rounded-full border border-blue-600 bg-blue-600 px-4 py-1.5 text-sm font-semibold text-white transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">
<svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.5" class="h-3.5 w-3.5"><path d="M4 10l4 4 8-9" stroke-linecap="round" stroke-linejoin="round" /></svg>
Following
</button>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
pressedLabel必須 | string | - | Pressed label |
defaultPressed | boolean | false | Default pressed |
onChange | (pressed: boolean) => void | - | On change |
The visible text flips between `label` and `pressedLabel` and a check appears when pressed, so the toggle never leans on the fill colour alone. Drive it from `onChange` to persist the follow.