Switch
StabilnyWłącza lub wyłącza ustawienie — zmiana działa w chwili przełączenia.
Anatomia
- 1TorPo włączeniu wypełniony kolorem marki, po wyłączeniu neutralny. Niewidoczny obszar klikalny powiększa go do 44 × 36 px.
- 2UchwytPo przełączeniu przesuwa się na drugą stronę ruchem sprężyny, a podczas wciśnięcia się rozciąga.
- 3EtykietaNazywa ustawienie, a nie czynność. Kliknięcie etykiety również zmienia stan przełącznika.
Instalacja
$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/switch.jsonUżycie
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"<Field orientation="horizontal">
<Switch id="auto-deploy" />
<FieldLabel htmlFor="auto-deploy">Deploy on every push</FieldLabel>
</Field>Uchwyt porusza się ruchem sprężyny i rozciąga się pod naciskiem — tak jak fizyczny przełącznik ustępuje pod palcem. Przy ograniczonym ruchu po prostu przeskakuje na miejsce.
Przykłady
Przełącznik czy pole wyboru?
Przełącznik działa jak włącznik światła: jego przestawienie od razu coś zmienia — bez przycisku Zapisz i bez potwierdzenia. Pole wyboru to odpowiedź w formularzu: nic się nie dzieje, dopóki formularz nie zostanie wysłany. Tutaj przełącznik zmienia wygląd karty w chwili przestawienia.
Lista ustawień
Najczęstsze miejsce dla przełączników: jedno ustawienie w wierszu, etykieta i krótki opis po lewej, przełącznik po prawej — tam, gdzie wzrok trafia po przeczytaniu. Separatory ułatwiają przeglądanie długich list.
Pozwól recenzentom komentować wdrożenia podglądowe.
Klienci pozostają przy załadowanej wersji do czasu odświeżenia strony.
Każdy, kto ma link, może przeczytać wynik budowania.
Rozmiary
size="sm" pasuje do gęstych tabel i kompaktowych paneli; domyślny rozmiar sprawdza się w formularzach i na stronach ustawień.
Stany
Wyłączone przełączniki zachowują swoje położenie, więc nadal widać bieżącą wartość. Gdy ustawienie jest wymagane, oznacz przełącznik atrybutem aria-invalid i wyjaśnij powód w FieldError.
Wytyczne
Kiedy używać
- Do ustawień, które działają natychmiast: powiadomień, integracji, włączania funkcji, trybu ciemnego.
- Do stanów binarnych, które ludzie rozumieją bez dodatkowych wyjaśnień — włączone albo wyłączone.
Kiedy nie używać
- W formularzach, które się wysyła — użyj komponentu Checkbox.
- Do wyborów innych niż włącz/wyłącz, takich jak Miesięcznie czy Rocznie — użyj komponentu Radio Group lub Toggle Group.
- Do akcji z konsekwencjami, które wymagają potwierdzenia — użyj komponentów Button i Alert Dialog.
Etykiety
Nazywaj ustawienie, a nie stan. Przełącznik sam pokazuje włączone i wyłączone, więc etykieta powinna mówić, co jest włączane — nigdy Włącz / Wyłącz i nigdy tekst, który zmienia się po przełączeniu.
Powiadomienia e-mail
Powiadomienia są włączone — kliknij, aby wyłączyć
Informacja zwrotna
Przełącznik działa natychmiast, więc potwierdzaj wynik, gdy nie widać go na ekranie — na przykład powiadomieniem Toast o treści Włączono komentarze w podglądach — a jeśli żądanie się nie powiedzie, cofnij zmianę (i wyjaśnij dlaczego).
Dostępność
Przełącznik renderuje role="switch" z aria-checked oraz ukryte pole typu checkbox na potrzeby formularzy. Sąsiedni FieldLabel z htmlFor jednocześnie nadaje mu nazwę i przełącza go po kliknięciu.
| Klawisz | Działanie |
|---|---|
Tab | Przenosi fokus na przełącznik. Fokus widać jako pierścień 2 px odsunięty od toru. |
SpacjaEnter | Zmienia stan przełącznika. |
- Krawędzie. Tor wyłączonego przełącznika używa tokenu
input, który ma kontrast co najmniej 3:1 względem strony (WCAG 1.4.11); tor włączonego ma pełne wypełnienie w kolorze marki. Stan przekazuje położenie uchwytu — nie sam kolor. - Rozmiar celu. Tor ma 36 × 20 px, a przezroczysty obszar klikalny powiększa go do 44 × 36 px.
- Ruch. Przy
prefers-reduced-motionsprężyna i rozciąganie są wyłączone.
Dokumentacja API
Switch
Renderuje <span role="switch"> z uchwytem i ukrytym <input type="checkbox">. Przyjmuje wszystkie propsy Switch.Root z Base UI.