Schakelgroep

Knopgroepen met twee statussen voor werkbalken in de editor, weergaveschakelaars en filterbalken — met die neobrutalistische stijl van randen en schaduwen.

import { Bold, Italic, Underline } from "lucide-react"

import {

De toggle group is een rij knoppen met twee standen, waarvan er één (de standaard) of meerdere (multiple) tegelijk ingedrukt kunnen zijn. Gebouwd op de component Base UI Toggle Group en vormgegeven volgens het neobrutalistische recept: dikke randen, harde schaduwen en vette typografie.

Ideaal voor:

Editorwerkbalken — vet/cursief/onderstreept, tekstuitlijning, lijststijlen met multiple.
Weergavewisselaars — raster versus lijst, grafiek versus tabel, dag/week/maand; de standaard houdt er hooguit één actief.
Filterbalken — tags, categorieën of facetten die de gebruiker naar believen aan- en uitzet.

Installatie


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/toggle-group.json
npx shadcn@latest add https://neobrutalism.com/r/base/toggle-group.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/toggle-group.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/toggle-group.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/toggle-group.tsx

"use client"

import * as React from "react"
import { type VariantProps } from "class-variance-authority"
import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"
import { toggleVariants } from "@/components/ui/toggle"

const ToggleGroupContext = React.createContext<
  VariantProps<typeof toggleVariants> & {
    spacing?: number
    orientation?: "horizontal" | "vertical"
  }
>({
  size: "default",
  variant: "default",
  spacing: 2,
  orientation: "horizontal",
})

function ToggleGroup({
  className,
  variant,
  size,
  spacing = 2,
  orientation = "horizontal",
  children,
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
  VariantProps<typeof toggleVariants> & {
    spacing?: number
    orientation?: "horizontal" | "vertical"
  }) {
  return (
    <ToggleGroupPrimitive.Root
      data-slot="toggle-group"
      data-variant={variant}
      data-size={size}
      data-spacing={spacing}
      data-orientation={orientation}
      style={{ "--gap": spacing } as React.CSSProperties}
      className={cn(
        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
        className
      )}
      {...props}
    >
      <ToggleGroupContext.Provider
        value={{ variant, size, spacing, orientation }}
      >
        {children}
      </ToggleGroupContext.Provider>
    </ToggleGroupPrimitive.Root>
  )
}

function ToggleGroupItem({
  className,
  children,
  variant = "default",
  size = "default",
  ...props
}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
  VariantProps<typeof toggleVariants>) {
  const context = React.useContext(ToggleGroupContext)

  return (
    <ToggleGroupPrimitive.Item
      data-slot="toggle-group-item"
      data-variant={context.variant || variant}
      data-size={context.size || size}
      data-spacing={context.spacing}
      className={cn(
        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
        toggleVariants({
          variant: context.variant || variant,
          size: context.size || size,
        }),
        className
      )}
      {...props}
    >
      {children}
    </ToggleGroupPrimitive.Item>
  )
}

export { ToggleGroup, ToggleGroupItem }

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

Gebruik

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"

<ToggleGroup type="single">
  <ToggleGroupItem value="a">A</ToggleGroupItem>
  <ToggleGroupItem value="b">B</ToggleGroupItem>
  <ToggleGroupItem value="c">C</ToggleGroupItem>
</ToggleGroup>

Compositie

Gebruik de volgende compositie om een ToggleGroup te bouwen:

ToggleGroup
├── ToggleGroupItem
└── ToggleGroupItem

Voorbeelden

Outline

Gebruik variant="outline" voor een omlijnde stijl.

import {
  ToggleGroup,
  ToggleGroupItem,

Formaat

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

import {
  ToggleGroup,
  ToggleGroupItem,

Tussenruimte

Gebruik spacing om tussenruimte tussen de items van de toggle group toe te voegen.

import {
  ToggleGroup,
  ToggleGroupItem,

Vertical

Gebruik orientation="vertical" voor verticale toggle groups.

import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react"

import {

Uitgeschakeld

import { Bold, Italic, Underline } from "lucide-react"

import {

Aangepast

Een voorbeeld van een aangepaste toggle group.

"use client"

import * as React from "react"

RTL

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

"use client"

import * as React from "react"

Toegankelijkheid

Elk item is een toggleknop volgens het WAI-ARIA Button-patroon: de groep rendert role="group" en elk item is een echte <button> met aria-pressed, in zowel enkelvoudige als meervoudige modus. De focus werkt met een roving tabindex, zodat de hele groep één tabstop vormt. Items met alleen een icoon hebben een aria-label nodig.

Toetsenbordinteracties:

Toets	Actie
`Tab` / `Shift + Tab`	Verplaatst de focus de groep in en eruit
`Space` / `Enter`	Zet het gefocuste item om
`ArrowRight` / `ArrowDown`	Verplaatst de focus naar het volgende item
`ArrowLeft` / `ArrowUp`	Verplaatst de focus naar het vorige item
`Home` / `End`	Springt naar het eerste / laatste item