Checkbox

Caixa de seleção do Arrow. v-model aceita boolean (seleção única) ou array (grupo — idiomático do Vue). Consome o DNA dos Fundamentos (04 Forma · interactive.sm, 01 Cor · action, 02 Tipografia).

Playground

Importação

import { Checkbox } from '@arrow/components-vue'

Uso básico

Aceito os termos de uso

<script setup>
import { ref } from 'vue'
const aceito = ref(false)
</script>

<template>
  <Checkbox v-model="aceito" label="Aceito os termos de uso" />
</template>

Estados

DesmarcadoMarcadoIndeterminadoDesabilitado

<Checkbox :model-value="false" label="Desmarcado" />
<Checkbox :model-value="true" label="Marcado" />
<Checkbox :indeterminate="true" label="Indeterminado" />
<Checkbox :model-value="true" disabled label="Desabilitado" />

Grupo (v-model em array)

Passe um array no v-model e um value em cada checkbox — o Vue gerencia a inclusão/remoção sozinho (sem prop multiSelect).

E-mailSMSPush

Selecionados: [ "email" ]

<script setup>
import { ref } from 'vue'
const grupo = ref(['email'])
</script>

<template>
  <Checkbox v-model="grupo" value="email" label="E-mail" />
  <Checkbox v-model="grupo" value="sms" label="SMS" />
  <Checkbox v-model="grupo" value="push" label="Push" />
</template>

Tamanho · size

sm (caixa 16px) · md (20px, padrão).

SmallMedium

<Checkbox v-model="sm" size="sm" label="Small" />
<Checkbox v-model="md" size="md" label="Medium" />

API

Props

Prop	Tipo	Padrão	Descrição
modelValue	boolean | unknown[]	false	Estado (single) ou array de selecionados (grupo). Use com v-model.
value	unknown	—	Valor deste item quando modelValue é array (modo grupo).
label	string	—	Texto ao lado da caixa. Alternativa ao slot default.
indeterminate	boolean	false	Estado parcial (seleção mista).
disabled	boolean	false	Desabilita interação.
size	'sm' | 'md'	'md'	Tamanho da caixa: 16 / 20 px.

Eventos

Evento	Payload	Descrição
update:modelValue	boolean | unknown[]	v-model. Single → novo booleano; array → novo array com o value incluído/removido.

Slots

Nome	Descrição
default	Conteúdo do label (tem prioridade sobre label).

Acessibilidade

• <input type="checkbox"> nativo (oculto, mas focável) — teclado e leitores de tela de fábrica; indeterminate é refletido na propriedade nativa (anunciado como "mixed").
• :focus-visible com anel de 3px no box (color.state.focus-ring).
• O <label> envolve tudo → clicar no texto também alterna.

Migração do MeCheckbox

• multiSelect + toggle manual → v-model em array nativo. Passe um array e o value; o Vue cuida do resto.
• labelSize (8 tamanhos, até 48px) → removido. Label fixo em type.body.sm; a caixa tem size sm/md.
• fontWeight (Montserrat) → removido. Arrow é Inter; o peso vem do token.
• Novo: indeterminate.