CustomRadioGroup - Yampi Developer Portal

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

Propriedade	Tipo	Obrigatória	Valor padrão	Descrição
`options`	`Array`	✅	—	Lista de opções. Cada item deve ter `key` (String), `text` (String) e `value` (qualquer).
`initialValue`	`Boolean`	✅	—	Valor selecionado inicialmente.
`name`	`String`	❌	`''`	Atributo `name` do grupo de inputs para acessibilidade.
`value`	`Boolean`	❌	`undefined`	Valor selecionado atual. Use para atualização programática.

Eventos

Evento	Payload	Descrição
`pick`	`any`	Emitido com o `value` da opção selecionada.

Slots

Slot	Descrição
`title`	Título exibido acima do grupo de radio buttons.
`subtitle`	Subtítulo ou descrição exibida abaixo do título.

⌘I