Grupo de opções

Os rádios servem para escolher exatamente uma opção de um conjunto pequeno e visível. O radio() desenha um; o choiceGroup() constrói o conjunto todo a partir de um array e dá-lhe a legenda e o role="radiogroup" que fazem dele um grupo em vez de uma pilha de inputs.

Partilham um name, por isso o navegador trata da exclusividade mútua e da navegação com as setas entre eles. Nada aqui envia um script.

Grupo básico

Plano

GrátisProEquipa

choiceGroup({
  legend: 'Plano',
  name: 'plan',
  value: 'pro',
  options: [
    { value: 'free', label: 'Grátis' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Equipa' },
  ],
})

Em linha

Etiquetas curtas leem-se melhor numa só linha. As longas devem ficar empilhadas, que é a predefinição.

Formato

desktopmobile

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

Cadeias simples

Quando o valor e a etiqueta são iguais, passa cadeias.

Nível de registo

infowarnerrorsilent

choiceGroup({
  legend: 'Nível de registo',
  name: 'log-level',
  direction: 'row',
  value: 'warn',
  options: ['info', 'warn', 'error', 'silent'],
})

Opções desativadas

Renderização

EstáticaIlhas de servidorSSR completo

O SSR completo precisa de um alojamento Node, que este projeto não tem.

choiceGroup({
  legend: 'Renderização',
  name: 'renderer',
  value: 'static',
  options: [
    { value: 'static', label: 'Estática' },
    { value: 'islands', label: 'Ilhas de servidor' },
    { value: 'ssr', label: 'SSR completo', disabled: true },
  ],
  help: 'O SSR completo precisa de um alojamento Node, que este projeto não tem.',
})

Um de cada vez

Usa o radio() diretamente quando as opções não forem suficientemente uniformes para virem de um array — por exemplo, quando cada uma traz a sua própria descrição.

A cada pushSó em versões com tagManualmente

stack({ gap: 'md' },
  radio({ name: 'deploy', value: 'push', label: 'A cada push', checked: true }),
  radio({ name: 'deploy', value: 'tag', label: 'Só em versões com tag' }),
  radio({ name: 'deploy', value: 'manual', label: 'Manualmente' }),
)

Cores

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' }),
)

Num cartão

Definições de construção

Aplicadas na próxima publicação

URLs limpos

LigadosDesligados

Imagens

Redimensionar e converterCopiar tal como estão

card(
  cardHeader({ title: 'Definições de construção', subtitle: 'Aplicadas na próxima publicação' }),
  cardBody(
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'URLs limpos',
        name: 'clean-urls',
        direction: 'row',
        value: 'on',
        options: [
          { value: 'on', label: 'Ligados' },
          { value: 'off', label: 'Desligados' },
        ],
      }),
      choiceGroup({
        legend: 'Imagens',
        name: 'images',
        value: 'optimise',
        options: [
          { value: 'optimise', label: 'Redimensionar e converter' },
          { value: 'copy', label: 'Copiar tal como estão' },
        ],
      }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Guardar'),
  ),
)

Props

choiceGroup():

Prop	Tipo	Predefinição	Descrição
`legend`	`Child`	—	Etiqueta do grupo inteiro.
`name`	`string`	—	Nome de formulário partilhado — é o que torna os rádios exclusivos.
`options`	`Array`	`[]`	Cadeias, ou objetos { value, label, disabled }.
`value`	`string \| number \| Array`	—	Que opção está selecionada. Um array para caixas de seleção.
`type`	`'radio' \| 'checkbox'`	`'radio'`	Que controlo construir. Também escolhe o papel do grupo.
`direction`	`'row' \| 'column'`	`'column'`	Como as opções são dispostas.
`help`	`Child`	—	Dica por baixo do grupo.

radio() aceita as mesmas props que o checkbox(): label, color, checked, name, value e disabled.