Vitral 0.2
Formulário

Checkbox

Um checkbox nativo sob uma caixa desenhada, ligado a um booleano ou a um array de valores, com estado misto.

Testado com WAI-ARIA

Importação

main.ts
import { Checkbox } from '@vitral/vue';

Binário

accepted: false, newsletter: no
<script setup lang="ts">import { Checkbox } from '@vitral/vue';import { ref } from 'vue'; const accepted = ref(false);const newsletter = ref('no');</script> <template>    <Checkbox v-model="accepted" label="I accept the terms" />    <Checkbox v-model="newsletter" true-value="yes" false-value="no" label="Send me the newsletter" />    <small style="color: var(--vt-text-muted-color)">accepted: {{ accepted }}, newsletter: {{ newsletter }}</small></template>

Grupo e estado misto

A caixa principal fica indeterminada enquanto só alguns dos ingredientes estão escolhidos.

Toppings
[ "cheese" ]
<script setup lang="ts">import { Checkbox } from '@vitral/vue';import { computed, ref } from 'vue'; const toppings = ref<string[]>(['cheese']);const all = ['cheese', 'mushroom', 'olives'];const allChecked = computed({    get: () => toppings.value.length === all.length,    set: (on: boolean) => (toppings.value = on ? [...all] : [])});const mixed = computed(() => toppings.value.length > 0 && toppings.value.length < all.length);</script> <template>    <div role="group" aria-labelledby="cb-toppings" style="display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem">        <small id="cb-toppings" style="color: var(--vt-text-muted-color)">Toppings</small>        <Checkbox v-model="allChecked" :indeterminate="mixed" label="All toppings" />        <div style="display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding-inline-start: 1.75rem">            <Checkbox v-model="toppings" value="cheese" label="Cheese" name="topping" />            <Checkbox v-model="toppings" value="mushroom" label="Mushroom" name="topping" />            <Checkbox v-model="toppings" value="olives" label="Olives" name="topping" />        </div>        <small style="color: var(--vt-text-muted-color)">{{ toppings }}</small>    </div></template>

Conteúdo rico

<script setup lang="ts">import { Checkbox } from '@vitral/vue';</script> <template>    <Checkbox binary>I have read the <a href="#privacy">privacy notice</a></Checkbox></template>

Tamanhos e estados

<script setup lang="ts">import { Checkbox } from '@vitral/vue';</script> <template>    <Checkbox :model-value="true" size="small" label="Small" />    <Checkbox :model-value="true" label="Normal" />    <Checkbox :model-value="true" size="large" label="Large" />    <Checkbox :model-value="false" invalid label="Invalid" />    <Checkbox :model-value="false" disabled label="Disabled" />    <Checkbox :model-value="true" disabled label="Disabled checked" />    <Checkbox :model-value="true" readonly label="Read only" /></template>

API

Lido de packages/vue/src/components/Checkbox/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
valueanyO valor que esta caixa adiciona a um v-model de array quando marcada. Omita-o (ou defina `binary`) e o v-model passa a ser booleano.
binarybooleanO v-model é um único valor marcado/desmarcado em vez de um array. Implícito quando não há `value`.
trueValueanyO valor que uma caixa binária marcada dá ao v-model. O padrão é true.
falseValueanyO valor que uma caixa binária desmarcada dá ao v-model. O padrão é false.
labelstringO texto ao lado da caixa; o slot padrão aceita conteúdo mais rico. Qualquer um vira o seu `<label>`.
sizeSize—
invalidboolean—
disabledboolean—
readonlyboolean—

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Emits

EventoPayloadDescrição
changeevent: CheckboxChangeEvent—
focusevent: FocusEvent—
blurevent: FocusEvent—

Slots

NomeProps do slotDescrição
default—O conteúdo do rótulo.
icon(props: { checked: boolean; indeterminate: boolean })Substitui o visto (e o traço do estado misto).

Usado nestes templates