CheckboxGroup

CheckboxGroups são componentes de formulário que permitem seleções binárias e múltiplas.

---

Quando usar:

• Quando precisar de um componente de formulário para seleções binárias com várias opções.

Quando não usar:

• Quando for preciso que o efeito da interação com o Checkbox seja imediato. Checkboxes devem ser usados sempre em conjunto com um botão de submissão. Para contornar casos como esse, use Switches.

---

Uso

Customização com Slot de Escopo (Scoped Slot)

O CheckboxGroup expõe um único slot com escopo chamado #append. Ele permite customizar a área à direita de cada checkbox individual do grupo usando o objeto option atual.

Exemplo 1: Exibindo um elemento padrão em todas as opções

<CdsCheckboxGroup
	v-model="value"
	label="CheckboxGroup"
	variant="green"
	state="default"
	:options="[
		{
			label: 'Teste 1',
			value: 'test-1',
		},
		{
			label: 'Teste 2',
			value: 'test-2',
		},
		{
			label: 'Teste 3',
			value: 'test-3',
		},
	]"
	:disabled="false"
>
	<template #append="{ option }">
		<CdsBadge
			variant="red"
			size="md"
		>
			Badge
		</CdsBadge>
	</template>
</CdsCheckboxGroup>

Exemplo 2: Renderização condicional para opções específicas

Para customizar de forma exclusiva apenas determinados checkboxes, você pode utilizar a renderização condicional baseada na propriedade option.value:

<CdsCheckboxGroup
	v-model="value"
	label="CheckboxGroup"
	:options="[
		{
			label: 'Teste 1',
			value: 'test-1',
		},
		{
			label: 'Teste 2',
			value: 'test-2',
		},
	]"
>
	<template #append="{ option }">
		<span v-if="option.value === 'test-1'">
			Texto exclusivo 1
		</span>

		<span v-if="option.value === 'test-2'">
			Texto exclusivo 2
		</span>
	</template>
</CdsCheckboxGroup>

---

Preview

Checkbox Group

Teste 1

Teste 2

Teste 3

Mostrar log

⚡Nenhum evento foi disparado

---

Props

Nome	Tipo	Default	Opções	Descrição
modelValue	array	[]	--	Prop usada como v-model para monitorar as seleções do CheckboxGroup
options	array	[]	--	Opções disponíveis para seleção na lista a ser renderizada pelo componente. Deve ser formada por objetos contendo `label` e `value`.
label	string	'Label'	--	Etiqueta do componente.
required	boolean	false	--	Exibe asterisco de obrigatório (obs.: não faz a validação)
variant	string	'green'	green teal blue indigo violet pink red orange amber dark	A variante de cor. São 10 variantes:
disabled	boolean	false	--	Controla o status checkbox
state	string	'default'	default valid invalid	Especifica o estado do CheckboxGroup. As opções são 'default', 'valid' e 'invalid'.
errorMessage	string	'Valor inválido'	--	Especifica a mensagem de erro, que será exibida caso o estado seja inválido

Eventos

Nome	Descrição
@update:modelValue

Slots

Nome	Descrição
#append	Slot com escopo para renderizar elementos adicionais à direita de cada checkbox do grupo.