LxCheckbox

Visão geral

O componente LxCheckbox é utilizado para fazer seleção de itens em uma lista, em telas de configuração, para não exibir uma mensagem, ou, não executar uma ação novamente.

Checkbox exemplo

Clique para visualizar o código

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

const modelValue = ref('');
const disabled = ref(false);
const labelPosition = ref('end');
const value = ref(true);

</script>
<template>
	<LxCheckbox 
        id="lxcheckbox" 
        label="Checkbox exemplo" 
        :label-position="labelPosition" 
        v-model="modelValue" 
        :value="value"
        :disabled="disabled"
    />
</template>

Formato do v-model

O comportamento do v-model depende da prop :value:

Modo simples (sem :value)

O v-model recebe e emite Boolean. null representa o estado indeterminado (parcialmente marcado).

const aceito = ref(false)   // false = desmarcado, true = marcado, null = indeterminado

Modo lista (com :value)

Passe um array no v-model e o value de cada checkbox será adicionado/removido automaticamente.

const selecionados = ref([])   // ✅ inicialize como array vazio
// null no array indica seleção parcial (ex: "Selecionar todos" parcialmente marcado)

<LxCheckbox v-model="selecionados" :value="item.Id" :label="item.Nome" />
<!-- selecionados = [3, 7, 12] quando os checkboxes com value 3, 7 e 12 estão marcados -->

Propriedades

Nome	Descrição	Tipo	Padrão
id	Identificador único do checkbox	String	'Required'
modelValue	Valor do campo de entrada. Nota: O v-model pode ser definido como um array de itens ou apenas true/false.	Set, Array, Boolean ou null	'Required'
value	É o valor que será adicionado à lista vinculada ao v-model quando o checkbox for marcado. Normalmente, esse valor é o ID do item da linha onde o checkbox está. Nota: Se você não informar esse valor, o checkbox vai retornar apenas true ou false no v-model.	Number, Boolean ou null	null
disabled	Indica se o campo está desabilitado.	Boolean	false
label	Rótulo do checkbox.	String	''
labelPosition	A posição que o label pode ficar, em relação ao checkbox. Antes ou depois. Nota: Utilizar valores pré-definidos start ou end.	String	end

Eventos

Nome	Descrição
update:modelValue	Emitido quando o valor do campo de entrada é atualizado. Nota: O v-model pode ser definido como um array de itens ou apenas true/false.

Playground

Desabilitado

Label:

Posição do Label:startend

Checkbox marcado

Checkbox exemplo