Grupa przełączników

Grupa przełączników to rząd wyborów czytany jako jedna kontrolka. Zbuduj ją z items i powiedz przez value, który jest włączony.

Podstawowa grupa

toggleGroup({
  label: 'Wyrównanie tekstu',
  value: 'center',
  items: [
    { value: 'left', label: 'Do lewej' },
    { value: 'center', label: 'Do środka' },
    { value: 'right', label: 'Do prawej' },
  ],
})

Zwykłe ciągi znaków

toggleGroup({ label: 'Gęstość', value: 'wygodna', items: ['zwarta', 'wygodna', 'przestronna'] })

Odnośniki

Tej postaci zwykle chce witryna statyczna: każdy segment to strona. Elementy z href renderują się jako kotwice, a aktywny dostaje aria-current="page" — nie aria-pressed, bo odnośnik nie jest wciśniętym przyciskiem.

Dokumentacja UI Przykłady

toggleGroup({
  label: 'Sekcja',
  value: 'ui',
  items: [
    { value: 'docs', label: 'Dokumentacja', href: '/docs' },
    { value: 'ui', label: 'UI', href: '/ui' },
    { value: 'examples', label: 'Przykłady', href: '/examples' },
  ],
})

Więcej niż jeden włączony

Podaj tablicę jako value. Kontener i tak jest zwykłą group — radiogroup byłoby błędem, bo to wciśnięte przyciski, a nie opcje radio.

toggleGroup({
  label: 'Formatowanie',
  value: ['bold', 'underline'],
  items: [
    { value: 'bold', label: 'Pogrubienie' },
    { value: 'italic', label: 'Kursywa' },
    { value: 'underline', label: 'Podkreślenie' },
  ],
})

Rozmiary i warianty

stack({ gap: 'md' },
  toggleGroup({ size: 'sm', label: 'Mały', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'md', label: 'Średni', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'lg', label: 'Duży', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ variant: 'ghost', label: 'Ghost', value: 'b', items: ['a', 'b', 'c'] }),
)

Wyłączone elementy

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

Na pasku narzędzi

stack({ direction: 'row', gap: 'md', wrap: true, align: 'center' },
  toggleGroup({ label: 'Wyrównanie', value: 'Do lewej', size: 'sm', items: ['Do lewej', 'Do środka', 'Do prawej'] }),
  divider({ orientation: 'vertical' }),
  toggleGroup({ label: 'Styl', value: ['Pogrubienie'], size: 'sm', items: ['Pogrubienie', 'Kursywa'] }),
)

Kiedy użyć czegoś innego

Jeśli wybór jest wysyłany formularzem, użyj choiceGroup() — prawdziwe opcje radio, bez potrzeby skryptu. Jeśli każdy segment to strona, wybierz postać z odnośnikami powyżej. Grupa przełączników jest dla wyboru, na który reaguje sama strona.

Propsy

Prop	Typ	Domyślnie	Opis
`items`	`Array`	`[]`	Ciągi znaków albo obiekty { value, label, href, disabled }.
`value`	`string \| number \| Array`	—	Który element jest włączony. Tablica, gdy może być ich kilka.
`label`	`string`	—	Dostępna nazwa grupy.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Stosowany do każdego elementu.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Jak wygląda element wyłączony.