Naar inhoud
1.6k

Schakelaar

Een aan/uit-schakelaar voor snelle instellingen — meldingen, donkere modus, feature flags — met die neobrutalistische stijl van randen en schaduwen.

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

De switch is een schakelaar met twee standen — aan of uit, direct toegepast op het moment van omzetten, zonder verzendknop. Gebouwd op de component Base UI Switch en vormgegeven volgens het neobrutalistische recept: dikke randen, harde schaduwen en vette typografie.

Ideaal voor:

  • Instellingenpanelen — meldingen, donkere modus, automatisch afspelen: voorkeuren die meteen ingaan.
  • Feature flags — zet een bètafunctie aan of wissel tussen maandelijkse en jaarlijkse facturering.
  • Bediening per rij — activeer of pauzeer items in een tabel of lijst zonder een formulier te openen.

Installatie

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

Installeer de volgende afhankelijkheden:

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

Kopieer en plak de volgende code in je project.

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 }

Werk de import-paden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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

Voorbeelden

Beschrijving

import {
  Field,
  FieldContent,

Keuzekaart

Selectie in kaartstijl, waarbij FieldLabel het hele Field omhult voor een klikbaar kaartpatroon.

import {
  Field,
  FieldContent,

Uitgeschakeld

Voeg de disabled-prop toe aan de component Switch om de switch uit te schakelen. Voeg de data-disabled-prop toe aan de component Field voor styling.

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

Ongeldig

Voeg de aria-invalid-prop toe aan de component Switch om een ongeldige status aan te geven. Voeg de data-invalid-prop toe aan de component Field voor styling.

import {
  Field,
  FieldContent,

Formaat

Gebruik de size-prop om het formaat van de switch te wijzigen.

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

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid

De switch volgt het WAI-ARIA Switch-patroon: hij rendert een echte knop met role="switch" en aria-checked, plus een verborgen input, zodat de waarde meegaat bij het verzenden van een omliggend formulier.

Toetsenbordinteracties:

ToetsActie
Tab / Shift + TabVerplaatst de focus naar / weg van de switch
SpaceZet de switch om
EnterZet de switch om

API-referentie

Zie de documentatie van Base UI Switch.