Checkbox

<script setup lang="ts">
const accepted = ref(false);
</script>

<template>
  <div class="demo-stack">
    <UiCheckbox v-model="accepted" label="Accept the terms" />
    <UiCheckbox :model-value="true" label="Disabled" disabled />
  </div>
</template>

<script setup lang="ts">
const toppings = ref(["cheese"]);
</script>

<template>
  <div class="demo-stack demo-field">
    <UiCheckbox v-model="toppings" value="cheese" label="Cheese" />
    <UiCheckbox v-model="toppings" value="olives" label="Olives" />
    <UiCheckbox v-model="toppings" value="basil" label="Basil" />
    <p class="demo-note">Selected: {{ toppings.join(", ") || "none" }}</p>
  </div>
</template>

<script setup lang="ts">
const files = ref(["a.txt"]);
const all = ["a.txt", "b.txt", "c.txt"];

const allSelected = computed({
  get: () => files.value.length === all.length,
  set: (checked) => (files.value = checked ? [...all] : []),
});
const someSelected = computed(() => files.value.length > 0 && !allSelected.value);
</script>

<template>
  <div class="demo-stack">
    <UiCheckbox v-model="allSelected" :indeterminate="someSelected" label="Select all" />
    <div class="demo-stack demo-indent">
      <UiCheckbox v-for="file in all" :key="file" v-model="files" :value="file" :label="file" />
    </div>
  </div>
</template>

<script setup lang="ts">
const accepted = ref(false);
const tried = ref(false);
</script>

<template>
  <div class="demo-stack">
    <UiCheckbox
      v-model="accepted"
      label="Accept the terms"
      hint="Required to create an account."
      :error="tried && !accepted ? 'Accept the terms to continue' : undefined"
    />
    <UiButton size="small" @click="tried = true">Create account</UiButton>
  </div>
</template>