> ## Documentation Index
> Fetch the complete documentation index at: https://docs.yampi.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# CustomCheckbox

> Checkbox estilizado com suporte a cor ou imagem de fundo e slot para exibição de contagem.

Checkbox customizável que permite adicionar cor ou imagem de fundo no indicador visual (útil para filtros de cor em produtos).

## Uso

Checkbox simples:

```vue theme={"system"}
<CustomCheckbox id="aceito" name="aceito" text="Aceito os termos" :checked="false" @change="handleChange" />
```

Filtro de cor:

```vue theme={"system"}
<CustomCheckbox id="cor-azul" name="cor" text="Azul" color="#0000FF" @change="handleChange">
  <template #count>(12)</template>
</CustomCheckbox>
```

## Propriedades

| Propriedade |    Tipo   | Obrigatória | Valor padrão | Descrição                                                           |
| :---------- | :-------: | :---------: | :----------: | :------------------------------------------------------------------ |
| `id`        |  `String` |      ❌      |     `''`     | Atributo `id` do input. Deve ser único na página.                   |
| `name`      |  `String` |      ❌      |     `''`     | Atributo `name` do input para agrupamento de formulário.            |
| `text`      |  `String` |      ❌      |     `''`     | Label exibida ao lado do checkbox.                                  |
| `checked`   | `Boolean` |      ❌      |    `false`   | Estado inicial do checkbox.                                         |
| `color`     |  `String` |      ❌      |    `null`    | Cor de fundo do indicador visual em hexadecimal (ex.: `'#FF0000'`). |
| `image`     |  `String` |      ❌      |    `null`    | URL de imagem de fundo do indicador visual.                         |

## Eventos

| Evento   | Payload   | Descrição                                             |
| :------- | :-------- | :---------------------------------------------------- |
| `change` | `Boolean` | Emitido com o novo estado (`true`/`false`) ao clicar. |

## Slots

| Slot    | Descrição                                                                                   |
| :------ | :------------------------------------------------------------------------------------------ |
| `count` | Conteúdo adicional exibido após o label, geralmente usado para mostrar a contagem de itens. |