LxInputRadioGroup

Visão geral

O componente LxInputRadioGroup é utilizado para exibir um grupo de botões de rádio com diversas opções de personalização, incluindo rótulo do grupo, opções de rádio e suporte a slots para customização do conteúdo.

Primeira opção

Segunda opção

Terceira opção

Clique para visualizar o código

vue

<script setup>
import { ref } from 'vue';
import { LxInputRadioGroup } from '@lde/lxcomponents';

const value = ref([]);
const options = [
	{ id: 'opt1', label: 'Primeira opção', value: 'a' },
	{ id: 'opt2', label: 'Segunda opção', value: 'b' },
	{ id: 'opt3', label: 'Terceira opção', value: 'c' }
];
</script>

<template>
	<LxInputRadioGroup id="input-radio-group-example" v-model="value" :options="options" group-name="input-radio-group-example" />
</template>

Propriedades

Nome	Descrição	Tipo	Padrão
id	Identificador único do grupo de rádio.	`String`	`required`
modelValue	Valor selecionado do grupo de rádio. Nota: Utilizar a implementação padrão com o `v-model`.	`String` ou `Number`	`required`
groupName	Nome do grupo de rádio, utilizado para agrupar os botões de rádio.	`String`	`''`
groupLabel	Rótulo do grupo de rádio.	`String`	`''`
options	Lista de opções para os botões de rádio. Cada opção deve conter `id`, `label` e `value`.	`Array`	`[]`
isInvalid	Indica se o grupo de rádio está em estado inválido.	`Boolean`	`false`
disabled	Indica se o grupo de rádio está desabilitado.	`Boolean`	`false`

Eventos

Nome	Descrição
update:modelValue	Emitido quando o valor do grupo de rádio é atualizado. Nota: Utilizar a implementação padrão com o `v-model`.

Slots

Nome	Descrição
radio-options	Conteúdo personalizado para as opções de rádio.

Utilizando o Slot `radio-options`

Você pode utilizar o slot radio-options para chamar os LxInputRadioItem individualmente, caso deseje personalizar as opções de rádio. Veja um exemplo de como fazer isso:

Clique para visualizar o código

vue

<template>
  <LxInputRadioGroup
    id="custom-radio-group"
    v-model="selectedValue"
    groupLabel="Exemplo de Grupo de Rádio"
  >
    <template #radio-options>
      <LxInputRadioItem
        id="opt1"
        label="Primeira opção"
        v-model="selectedValue"
        value="a"
        groupName="custom-radio-group"
      />
      <LxInputRadioItem
        id="opt2"
        label="Segunda opção"
        v-model="selectedValue"
        value="b"
        groupName="custom-radio-group"
      />
      <LxInputRadioItem
        id="opt3"
        label="Terceira opção"
        v-model="selectedValue"
        value="c"
        groupName="custom-radio-group"
      />
    </template>
  </LxInputRadioGroup>
</template>

<script setup>
import { ref } from 'vue';
import { LxInputRadioGroup, LxInputRadioItem } from '@lde/lxcomponents';

const selectedValue = ref('');
</script>

Classes Padrão

O componente LxInputRadioGroup utiliza uma série de classes CSS padrão que podem ser personalizadas. Essas classes permitem que você estilize qualquer parte do campo de entrada usando ::v-deep com a classe desejada.

Nome	Descrição
lx-radio-group-wrapper	Container principal
lx-radio-group-options-wrapper	Container do grupo de radios

LxInputRadioGroup ​

Visão geral ​

Propriedades ​

Eventos ​

Slots ​

Utilizando o Slot radio-options ​

Classes Padrão ​

Playground ​