Gruppo di radio

I radio servono a scegliere esattamente un’opzione fra un insieme piccolo e visibile. radio() ne renderizza uno; choiceGroup() costruisce l’intero insieme da un array e gli dà la legenda e il role="radiogroup" che lo rendono un gruppo invece di un mucchio di input.

Condividono un name, quindi è il browser a occuparsi della mutua esclusività e della navigazione fra loro con le frecce. Qui non viene spedito alcuno script.

Gruppo di base

Piano
choiceGroup({
  legend: 'Piano',
  name: 'plan',
  value: 'pro',
  options: [
    { value: 'free', label: 'Gratuito' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Team' },
  ],
})

In riga

Le etichette corte si leggono meglio su una riga sola. Quelle lunghe dovrebbero restare impilate, che è il comportamento predefinito.

Formato
choiceGroup({
  legend: 'Formato',
  name: 'form-factor',
  direction: 'row',
  value: 'desktop',
  options: ['desktop', 'mobile'],
})

Semplici stringhe

Quando il valore e l’etichetta coincidono, passa delle stringhe.

Livello di log
choiceGroup({
  legend: 'Livello di log',
  name: 'log-level',
  direction: 'row',
  value: 'warn',
  options: ['info', 'warn', 'error', 'silent'],
})

Opzioni disattivate

Renderer
L’SSR completo richiede un host Node, che questo progetto non ha.
choiceGroup({
  legend: 'Renderer',
  name: 'renderer',
  value: 'static',
  options: [
    { value: 'static', label: 'Statico' },
    { value: 'islands', label: 'Island server' },
    { value: 'ssr', label: 'SSR completo', disabled: true },
  ],
  help: 'L’SSR completo richiede un host Node, che questo progetto non ha.',
})

Uno per volta

Usa radio() direttamente quando le opzioni non sono abbastanza uniformi da venire da un array — per esempio quando ciascuna porta una descrizione propria.

stack({ gap: 'md' },
  radio({ name: 'deploy', value: 'push', label: 'A ogni push', checked: true }),
  radio({ name: 'deploy', value: 'tag', label: 'Solo sui rilasci con tag' }),
  radio({ name: 'deploy', value: 'manual', label: 'Manualmente' }),
)

Colori

stack({ direction: 'row', gap: 'lg', wrap: true },
  radio({ label: 'Primary', name: 'c1', checked: true, color: 'primary' }),
  radio({ label: 'Neutral', name: 'c2', checked: true, color: 'neutral' }),
  radio({ label: 'Success', name: 'c3', checked: true, color: 'success' }),
  radio({ label: 'Warning', name: 'c4', checked: true, color: 'warning' }),
  radio({ label: 'Danger', name: 'c5', checked: true, color: 'danger' }),
)

In una scheda

Impostazioni di build

Applicate al prossimo deploy

URL puliti
Immagini
card(
  cardHeader({ title: 'Impostazioni di build', subtitle: 'Applicate al prossimo deploy' }),
  cardBody(
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'URL puliti',
        name: 'clean-urls',
        direction: 'row',
        value: 'on',
        options: [
          { value: 'on', label: 'Attivi' },
          { value: 'off', label: 'Disattivi' },
        ],
      }),
      choiceGroup({
        legend: 'Immagini',
        name: 'images',
        value: 'optimise',
        options: [
          { value: 'optimise', label: 'Ridimensiona e converti' },
          { value: 'copy', label: 'Copia così come sono' },
        ],
      }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Salva'),
  ),
)

Props

choiceGroup():

PropTipoPredefinitoDescrizione
legendChild—Etichetta dell’intero gruppo.
namestring—Nome di form condiviso — ciò che rende i radio esclusivi.
optionsArray[]Stringhe, oppure oggetti { value, label, disabled }.
valuestring | number | Array—Quale opzione è selezionata. Un array per le caselle di controllo.
type'radio' | 'checkbox''radio'Quale controllo costruire. Sceglie anche il ruolo del gruppo.
direction'row' | 'column''column'Come vengono disposte le opzioni.
helpChild—Suggerimento sotto il gruppo.

radio() accetta le stesse props di checkbox(): label, color, checked, name, value e disabled.