Skip to main content
Renderiza um grupo de radio buttons estilizados com suporte a slots para título e subtítulo, atributos de acessibilidade e navegação por teclado.

​
Uso

<CustomRadioGroup
  name="pagamento"
  :options="[
    { key: 'pix', text: 'PIX', value: 'pix' },
    { key: 'boleto', text: 'Boleto', value: 'boleto' },
    { key: 'cartao', text: 'Cartão', value: 'cartao' }
  ]"
  :initial-value="'pix'"
  @pick="handleSelection"
>
  <template #title>Forma de pagamento</template>
  <template #subtitle>Selecione como deseja pagar</template>
</CustomRadioGroup>

​
Propriedades

PropriedadeTipoObrigatóriaValor padrãoDescrição
optionsArray✅—Lista de opções. Cada item deve ter key (String), text (String) e value (qualquer).
initialValueBoolean✅—Valor selecionado inicialmente.
nameString❌''Atributo name do grupo de inputs para acessibilidade.
valueBoolean❌undefinedValor selecionado atual. Use para atualização programática.

​
Eventos

EventoPayloadDescrição
pickanyEmitido com o value da opção selecionada.

​
Slots

SlotDescrição
titleTítulo exibido acima do grupo de radio buttons.
subtitleSubtítulo ou descrição exibida abaixo do título.