Przejdź do treści
1.6k

Przełącznik

Przełącznik typu „włącz/wyłącz” do błyskawicznej zmiany ustawień — powiadomień, trybu ciemnego, flag funkcji — z neobrutalistycznymi ramkami i cieniami.

import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"

Switch to dwustanowy przełącznik — włączony albo wyłączony, działający w chwili przestawienia, bez przycisku zatwierdzania. Zbudowany na komponencie Base UI Switch i ostylowany zgodnie z neobrutalistyczną recepturą: grube ramki, twarde cienie i wyrazista typografia.

Sięgnij po to rozwiązanie, gdy:

  • Panele ustawień — powiadomienia, tryb ciemny, autoodtwarzanie: preferencje, które działają natychmiast.
  • Flagi funkcji — włączenie funkcji beta albo przełączenie między rozliczeniem miesięcznym a rocznym.
  • Kontrolki w wierszach — aktywowanie lub wstrzymywanie pozycji w tabeli albo na liście bez otwierania formularza.

Instalacja

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
npx shadcn@latest add https://neobrutalism.com/r/base/switch.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/switch.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/switch.json

Zainstaluj następujące zależności:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

Skopiuj i wklej poniższy kod do swojego projektu.

components/ui/switch.tsx
"use client"

import * as React from "react"
import { Switch as SwitchPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Switch({
  className,
  size = "default",
  ...props
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
  size?: "sm" | "default"
}) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      data-size={size}
      className={cn(
        "peer group/switch relative inline-flex shrink-0 cursor-pointer items-center border-2 border-foreground transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary aria-invalid:border-destructive data-[size=default]:h-6 data-[size=default]:w-11 data-[size=sm]:h-5 data-[size=sm]:w-9 data-checked:bg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
        className
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className="pointer-events-none mx-0.5 block border-2 border-foreground bg-primary transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-5 group-data-[size=sm]/switch:data-checked:translate-x-4 data-checked:bg-background data-unchecked:translate-x-0"
      />
    </SwitchPrimitive.Root>
  )
}

export { Switch }

Zaktualizuj ścieżki importu, aby pasowały do konfiguracji Twojego projektu.

Użycie

import { Switch } from "@/components/ui/switch"
<Switch />

Przykłady

Opis

import {
  Field,
  FieldContent,

Karta wyboru

Wybór w stylu karty, w którym FieldLabel otacza cały Field, tworząc klikalny wzorzec karty.

import {
  Field,
  FieldContent,

Wyłączony

Dodaj właściwość disabled do komponentu Switch, aby wyłączyć przełącznik. Dodaj właściwość data-disabled do komponentu Field w celu stylizacji.

import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

Nieprawidłowy

Dodaj właściwość aria-invalid do komponentu Switch, aby wskazać stan nieprawidłowy. Dodaj właściwość data-invalid do komponentu Field w celu stylizacji.

import {
  Field,
  FieldContent,

Rozmiar

Użyj właściwości size, aby zmienić rozmiar przełącznika.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

RTL

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność

Switch realizuje wzorzec WAI-ARIA Switch: renderuje prawdziwy przycisk z role="switch" i aria-checked, a do tego ukryte pole input, dzięki któremu wartość trafia do otaczającego formularza.

Obsługa klawiatury:

KlawiszDziałanie
Tab / Shift + TabPrzenosi fokus na przełącznik / poza niego
SpaceZmienia stan przełącznika
EnterZmienia stan przełącznika

Referencja API

Zobacz dokumentację Base UI Switch.