Zum Inhalt springen
1.6k

Schalter

Ein Ein-/Aus-Schalter für Sofort-Einstellungen – Benachrichtigungen, Dunkelmodus, Feature-Flags – mit dem neobrutalistischen Design aus Rahmen und Schatten.

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

Der Switch ist ein Umschalter mit zwei Zuständen – an oder aus, wirksam in dem Moment, in dem er kippt, ganz ohne Submit-Button. Er basiert auf der Base UI Switch-Komponente und folgt dem neobrutalistischen Rezept: dicke Rahmen, harte Schatten und kräftige Typografie.

Typische Anwendungsfälle:

  • Einstellungsbereiche – Benachrichtigungen, Dark Mode, Autoplay: Präferenzen, die sofort greifen.
  • Feature-Flags – ein Beta-Feature aktivieren oder zwischen monatlicher und jährlicher Abrechnung wechseln.
  • Steuerung pro Zeile – Einträge in einer Tabelle oder Liste aktivieren oder pausieren, ohne ein Formular zu öffnen.

Installation

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

Installiere die folgenden Abhängigkeiten:

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

Kopiere den folgenden Code und füge ihn in dein Projekt ein.

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 }

Passe die Importpfade an dein Projekt-Setup an.

Verwendung

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

Beispiele

Beschreibung

import {
  Field,
  FieldContent,

Auswahlkarte

Auswahl im Kartenstil, bei der FieldLabel das gesamte Field umschließt, um ein anklickbares Kartenmuster zu erzeugen.

import {
  Field,
  FieldContent,

Deaktiviert

Füge der Komponente Switch die disabled-Prop hinzu, um den Switch zu deaktivieren. Füge der Komponente Field die data-disabled-Prop für das Styling hinzu.

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

Ungültig

Füge der Komponente Switch die aria-invalid-Prop hinzu, um einen ungültigen Zustand anzuzeigen. Füge der Komponente Field die data-invalid-Prop für das Styling hinzu.

import {
  Field,
  FieldContent,

Größe

Verwende die size-Prop, um die Größe des Switches zu ändern.

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

RTL

Um RTL-Unterstützung in Neobrutalism zu aktivieren, siehe die RTL-Konfigurationsanleitung.

"use client"

import * as React from "react"

Barrierefreiheit

Der Switch folgt dem WAI-ARIA-Pattern „Switch“: Er rendert einen echten Button mit role="switch" und aria-checked, dazu ein verstecktes Input, damit der Wert mit einem umgebenden Formular abgeschickt wird.

Tastaturinteraktionen:

TasteAktion
Tab / Shift + TabBewegt den Fokus auf den Switch bzw. von ihm weg
SpaceSchaltet den Switch um
EnterSchaltet den Switch um

API-Referenz

Siehe die Dokumentation zu Base UI Switch.