Toggle-Gruppe

Eine Toggle-Gruppe ist eine Reihe von Optionen, die sich als ein einziges Steuerelement liest. Bau sie aus items und sag mit value, welche an ist.

Einfache Gruppe

toggleGroup({
  label: 'Textausrichtung',
  value: 'center',
  items: [
    { value: 'left', label: 'Links' },
    { value: 'center', label: 'Mitte' },
    { value: 'right', label: 'Rechts' },
  ],
})

Einfache Strings

toggleGroup({ label: 'Dichte', value: 'komfortabel', items: ['kompakt', 'komfortabel', 'großzügig'] })

Links

Das ist die Form, die eine statische Website meistens will: jedes Segment ist eine Seite. Einträge mit einem href werden als Anker gerendert, und der aktive bekommt aria-current="page" — nicht aria-pressed, denn ein Link ist kein Button, den man eingedrückt hat.

Doku UI Beispiele

toggleGroup({
  label: 'Bereich',
  value: 'ui',
  items: [
    { value: 'docs', label: 'Doku', href: '/de/docs' },
    { value: 'ui', label: 'UI', href: '/de/ui' },
    { value: 'examples', label: 'Beispiele', href: '/de/examples' },
  ],
})

Mehr als eine an

Übergib ein Array als value. Der Container bleibt in beiden Fällen eine schlichte group — eine radiogroup wäre falsch, denn das hier sind gedrückte Buttons und keine Radios.

toggleGroup({
  label: 'Formatierung',
  value: ['bold', 'underline'],
  items: [
    { value: 'bold', label: 'Fett' },
    { value: 'italic', label: 'Kursiv' },
    { value: 'underline', label: 'Unterstrichen' },
  ],
})

Größen und Varianten

stack({ gap: 'md' },
  toggleGroup({ size: 'sm', label: 'Klein', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'md', label: 'Mittel', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'lg', label: 'Groß', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ variant: 'ghost', label: 'Ghost', value: 'b', items: ['a', 'b', 'c'] }),
)

Deaktivierte Einträge

toggleGroup({
  label: 'Renderer',
  value: 'static',
  items: [
    { value: 'static', label: 'Statisch' },
    { value: 'islands', label: 'Islands' },
    { value: 'ssr', label: 'SSR', disabled: true },
  ],
})

In einer Werkzeugleiste

stack({ direction: 'row', gap: 'md', wrap: true, align: 'center' },
  toggleGroup({ label: 'Ausrichtung', value: 'Links', size: 'sm', items: ['Links', 'Mitte', 'Rechts'] }),
  divider({ orientation: 'vertical' }),
  toggleGroup({ label: 'Stil', value: ['Fett'], size: 'sm', items: ['Fett', 'Kursiv'] }),
)

Wann etwas anderes passt

Wird die Wahl mit einem Formular abgeschickt, nimm choiceGroup() — echte Radios, kein Skript nötig. Ist jedes Segment eine Seite, nimm lieber die Link-Form von oben. Eine Toggle-Gruppe ist für eine Wahl, auf die die Seite selbst reagiert.

Props

Prop	Typ	Standard	Beschreibung
`items`	`Array`	`[]`	Strings oder { value, label, href, disabled }-Objekte.
`value`	`string \| number \| Array`	—	Welcher Eintrag an ist. Ein Array, wenn es mehrere sein können.
`label`	`string`	—	Zugänglicher Name der Gruppe.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Gilt für jeden Eintrag.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Wie ein ausgeschalteter Eintrag aussieht.