Interruptor

Um interruptor serve para uma definição que se aplica assim que é mexida. Uma caixa de seleção serve para uma escolha que confirmas mais tarde, com um botão de submissão. Se o teu controlo está num formulário com um Guardar em baixo, é uma caixa de seleção.

O componente chama-se toggle() e não switch() por uma razão aborrecida mas incontornável: switch é uma palavra reservada e não pode ser um nome de importação. Por baixo é um <input type="checkbox"> a sério, com role="switch".

Interruptor básico

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Site público', name: 'public' }),
  toggle({ label: 'Ligado', name: 'on', checked: true }),
)

Cores

stack({ direction: 'row', gap: 'lg', wrap: true },
  toggle({ label: 'Primary', checked: true, color: 'primary' }),
  toggle({ label: 'Neutral', checked: true, color: 'neutral' }),
  toggle({ label: 'Success', checked: true, color: 'success' }),
  toggle({ label: 'Warning', checked: true, color: 'warning' }),
  toggle({ label: 'Danger', checked: true, color: 'danger' }),
)

Desativado

stack({ direction: 'row', gap: 'lg' },
  toggle({ label: 'Desligado e bloqueado', disabled: true }),
  toggle({ label: 'Ligado e bloqueado', checked: true, disabled: true }),
)

Sem etiqueta

Um interruptor sem etiqueta visível continua a precisar de um nome acessível. Passa aria-label — cai no input.

toggle({ 'aria-label': 'Ativar a pesquisa Pagefind', checked: true })

Uma lista de definições

A forma habitual: a etiqueta à esquerda, o interruptor à direita, uma linha por definição.

  • Pesquisa Pagefind
    Indexa todas as páginas no fim da construção.
  • Otimização de imagens
    Redimensiona e converte imagens na construção. Precisa do sharp.
  • Ilhas de servidor
    Renderiza as zonas marcadas no momento do pedido.
return list(
  [
    ['Pesquisa Pagefind', 'Indexa todas as páginas no fim da construção.', true],
    ['Otimização de imagens', 'Redimensiona e converte imagens na construção. Precisa do sharp.', true],
    ['Ilhas de servidor', 'Renderiza as zonas marcadas no momento do pedido.', false],
  ].map(([name, description, on]) =>
    listItem({
      title: name,
      description,
      end: toggle({ 'aria-label': name, checked: on }),
    }),
  ),
)

Props

PropTipoPredefiniçãoDescrição
labelChild—Texto ao lado do interruptor. Usa aria-label quando não houver nenhum.
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Cor da calha quando ligado.
checkedbooleanfalseSe começa ligado.
namestring—Nome do campo do formulário.
disabledbooleanfalseDesativa o input e esbate a linha.

Tudo o resto cai no <input>, que é onde onchange e aria-* pertencem.