CCheckbox

Checkboxes ou caixas de seleção podem ser usadas para ativar ou desativar uma opção. Se você tem várias opções aparecendo em uma lista, você pode economizar espaço usando caixas de seleção.

Exemplos

API

Exemplos de Checkboxes

Simples

Li e aceito os Termos de Uso

<c-checkbox label="Li e aceito os Termos de Uso" />

  <c-checkbox label="Li e aceito os Termos de Uso" />

Usando v-model

Li e aceito os Termos de Uso true

<template> <div> <c-checkbox v-model="check" label="Li e aceito os Termos de Uso" /> {{ check || false }} </div> </template> <script> export default { data () { return { check: true } } } </script>

<template>
  <div>
    <c-checkbox 
      v-model="check"
      label="Li e aceito os Termos de Uso" 
    />
    {{ check || false }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      check: true
    }
  }
}
</script>

Estado indeterminado

É possível exibir um checkbox com estado indeterminado passando um valor a prop de indeterminate

Li e aceito os Termos de Uso

<c-checkbox label="Li e aceito os Termos de Uso" indeterminate />

<c-checkbox
  label="Li e aceito os Termos de Uso"
  indeterminate
/>

Utilizando Slot para definir a label

Li e aceito os Termos de Uso

<c-checkbox> Li e aceito os Termos de Uso </c-checkbox>

<c-checkbox>
  Li e aceito os Termos de Uso
</c-checkbox>

Desabilitado

Li e aceito os Termos de Uso

<c-checkbox label="Li e aceito os Termos de Uso" disabled />

<c-checkbox
  label="Li e aceito os Termos de Uso"
  disabled
/>

Checkbox API

Para utilizar o CCheckbox é preciso primeiro importar o componente.

import { CCheckbox } from '@estrategiahq/coruja-web-ui';

Props

A props disponíveis para configurar o componente são:

Nome	Tipo	Default	Descrição
id	string	null	Permite passar um id único para o input.
name	string	null	Permite passar um nome único para o input.
value	boolean, null	false	Define o valor para o input.
disabled	boolean	false	Permite habilitar/desabilitar o input, pode utilizar as opções true ou false.
indeterminate	boolean	false	Define o checkbox com o estado de indeterminado.
label	string	vazio	Permite passar um label para o checkbox.

Slots

Podem conter qualquer tipo de código template, incluindo HTML ou outro componente. Temos defínido os seguintes slots:

Nome	Descrição
default	Se não definir um label na props do componente, você pode definir um label, com um slot chamado default.

Events

Usado para definir alguma ação.

Nome	Tipo	Descrição
@change	function	Emitido quando o valor do componente é alterado.
@focus	function	Emitido quando o componente é focado.
@blur	function	Emitido quando o componente perde o foco.