Gruppo a due stati

Un gruppo a due stati è una riga di scelte che si legge come un unico controllo. Costruiscilo da items, e di’ quale è acceso con value.

Gruppo di base

toggleGroup({
  label: 'Allineamento del testo',
  value: 'center',
  items: [
    { value: 'left', label: 'Sinistra' },
    { value: 'center', label: 'Centro' },
    { value: 'right', label: 'Destra' },
  ],
})

Semplici stringhe

toggleGroup({ label: 'Densità', value: 'comoda', items: ['compatta', 'comoda', 'ariosa'] })

Link

Questa è la forma che di solito vuole un sito statico: ogni segmento è una pagina. Gli elementi con un href vengono renderizzati come ancore e quello attivo è marcato aria-current="page" — non aria-pressed, perché un link non è un pulsante che hai premuto.

Documentazione UI Esempi

toggleGroup({
  label: 'Sezione',
  value: 'ui',
  items: [
    { value: 'docs', label: 'Documentazione', href: '/docs' },
    { value: 'ui', label: 'UI', href: '/ui' },
    { value: 'examples', label: 'Esempi', href: '/examples' },
  ],
})

Più di uno acceso

Passa un array come value. In ogni caso il contenitore è un semplice group — un radiogroup sarebbe sbagliato, visto che questi sono pulsanti premuti e non radio.

toggleGroup({
  label: 'Formattazione',
  value: ['bold', 'underline'],
  items: [
    { value: 'bold', label: 'Grassetto' },
    { value: 'italic', label: 'Corsivo' },
    { value: 'underline', label: 'Sottolineato' },
  ],
})

Dimensioni e varianti

stack({ gap: 'md' },
  toggleGroup({ size: 'sm', label: 'Piccolo', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'md', label: 'Medio', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ size: 'lg', label: 'Grande', value: 'a', items: ['a', 'b', 'c'] }),
  toggleGroup({ variant: 'ghost', label: 'Ghost', value: 'b', items: ['a', 'b', 'c'] }),
)

Elementi disattivati

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

In una barra degli strumenti

stack({ direction: 'row', gap: 'md', wrap: true, align: 'center' },
  toggleGroup({ label: 'Allineamento', value: 'Sinistra', size: 'sm', items: ['Sinistra', 'Centro', 'Destra'] }),
  divider({ orientation: 'vertical' }),
  toggleGroup({ label: 'Stile', value: ['Grassetto'], size: 'sm', items: ['Grassetto', 'Corsivo'] }),
)

Quando usare qualcos’altro

Se la scelta viene inviata con un form, usa choiceGroup() — radio veri, nessuno script necessario. Se ogni segmento è una pagina, preferisci la forma a link qui sopra. Un gruppo a due stati è per una scelta su cui agisce la pagina stessa.

Props

Prop	Tipo	Predefinito	Descrizione
`items`	`Array`	`[]`	Stringhe, oppure oggetti { value, label, href, disabled }.
`value`	`string \| number \| Array`	—	Quale elemento è acceso. Un array quando possono essercene più d’uno.
`label`	`string`	—	Nome accessibile del gruppo.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Applicata a ogni elemento.
`variant`	`'outline' \| 'ghost' \| 'soft'`	`'outline'`	Che aspetto ha un elemento spento.