Checkbox

<script setup lang="ts">
import { ref } from 'vue'
import { VCheckbox } from 'vectis-ui'

const subscribed = ref(true)
</script>

<template>
  <VCheckbox v-model="subscribed">Send me release notes</VCheckbox>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VCheckbox } from 'vectis-ui'

const digest = ref(true)
const mentions = ref(false)
</script>

<template>
  <div class="stack">
    <!-- The hint is tied to the box through aria-describedby, and it sits outside the
         label, so a screen reader reads it after the name rather than as part of it. -->
    <VCheckbox v-model="digest" label="Weekly digest" hint="A summary of the week, every Monday." />
    <VCheckbox v-model="mentions" label="Mentions" hint="Only when someone names you." />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { VCheckbox } from 'vectis-ui'
</script>

<template>
  <div class="stack">
    <VCheckbox>Label after the box, the default</VCheckbox>
    <VCheckbox label-position="start">Label before the box</VCheckbox>
  </div>
</template>

<style scoped>
/* `justify-items: start` keeps each row as wide as its own label: the clickable area is
   the whole <label>, so a stretched row would be clickable well past its text. */
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCheckbox } from 'vectis-ui'

const analytics = ref(true)
const crashes = ref(false)
</script>

<template>
  <div class="settings">
    <VCheckbox v-model="analytics" spread>Share anonymous usage data</VCheckbox>
    <VCheckbox v-model="crashes" spread label-position="start">Send crash reports</VCheckbox>
  </div>
</template>

<style scoped>
/* A spread row takes the width it is given, so the panel is what decides how far apart
   the label and the box end up. */
.settings {
  display: grid;
  gap: var(--vectis-space-3);
  inline-size: 100%;
  max-inline-size: 24rem;
  padding: var(--vectis-space-4);
  border: 1px solid var(--vectis-color-border);
  border-radius: var(--vectis-radius-surface);
}
</style>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { VCheckbox } from 'vectis-ui'

const scopes = ref([
  { label: 'Read', granted: true },
  { label: 'Write', granted: false },
  { label: 'Delete', granted: false },
])

const all = computed({
  get: () => scopes.value.every((scope) => scope.granted),
  set: (value: boolean) => {
    scopes.value.forEach((scope) => {
      scope.granted = value
    })
  },
})

/* The dash is a third appearance and not a third value: the parent is genuinely unticked
   here, and `indeterminate` is what draws it as partially checked. */
const some = computed(() => scopes.value.some((scope) => scope.granted) && !all.value)
</script>

<template>
  <div class="tree">
    <VCheckbox v-model="all" :indeterminate="some">Permissions</VCheckbox>
    <div class="children">
      <VCheckbox v-for="scope in scopes" :key="scope.label" v-model="scope.granted">
        {{ scope.label }}
      </VCheckbox>
    </div>
  </div>
</template>

<style scoped>
.tree,
.children {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
.children {
  padding-inline-start: var(--vectis-space-6);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCheckbox } from 'vectis-ui'

const on = ref(true)
const off = ref(false)
</script>

<template>
  <div class="stack">
    <!-- Still focusable and still submitted with the form, but a click or the Space key
         changes nothing. -->
    <VCheckbox v-model="on" readonly label="Set by your organisation" />
    <VCheckbox v-model="off" readonly label="Not available on your plan" />
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-3);
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import { VCheckbox } from 'vectis-ui'

const off = ref(false)
const on = ref(true)
</script>

<template>
  <div class="stack">
    <VCheckbox v-model="off" disabled>Unticked</VCheckbox>
    <VCheckbox v-model="on" disabled>Ticked</VCheckbox>
    <VCheckbox v-model="off" disabled indeterminate>Partially ticked</VCheckbox>
  </div>
</template>

<style scoped>
.stack {
  display: grid;
  justify-items: start;
  gap: var(--vectis-space-2);
}
</style>