Checkbox ​

<script lang="ts" setup>
import { ref } from 'vue'

const isAgreed = ref(false)
</script>

<template>
  <div class="flex flex-col mt-6">
    <ACheckbox v-model="isAgreed">
      I am agreed to terms and conditions
    </ACheckbox>
    <small class="mt-2">value: {{ isAgreed }}</small>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const documentation = ref()
const gifts = ref()
</script>

<template>
  <div class="grid grid-rows-2 gap-y-3">
    <ACheckbox
      v-model="documentation"
      icon="i-bx-x"
    >
      I have read the documentation
    </ACheckbox>

    <ACheckbox
      v-model="gifts"
      icon="i-bx-check-double"
    >
      Yes, send me gifts
    </ACheckbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const data = ref([])
</script>

<template>
  <div class="grid grid-rows-2 gap-y-3">
    <ACheckbox
      v-model="data"
      value="apple"
      label="Apple"
    />

    <ACheckbox
      v-model="data"
      value="banana"
      label="Banana"
    />

    <ACheckbox
      v-model="data"
      value="watermelon"
      label="Watermelon"
    />

    <ACheckbox
      v-model="data"
      value="orange"
      disabled
      label="Orange"
    />

    <p>Selected: {{ data }}</p>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const primary = ref(true)
const success = ref(true)
const info = ref(true)
const warning = ref(true)
const danger = ref(true)
</script>

<template>
  <div class="grid gap-y-3">
    <ACheckbox
      v-model="primary"
      color="primary"
    >
      Primary
    </ACheckbox>

    <ACheckbox
      v-model="success"
      color="success"
    >
      Success
    </ACheckbox>

    <ACheckbox
      v-model="info"
      color="info"
    >
      Info
    </ACheckbox>

    <ACheckbox
      v-model="warning"
      color="warning"
    >
      Warning
    </ACheckbox>

    <ACheckbox
      v-model="danger"
      color="danger"
    >
      Danger
    </ACheckbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref<boolean | null>(null)
</script>

<template>
  <div class="grid gap-y-3">
    <ACheckbox
      v-model="value"
      cycle-indeterminate
    >
      {{ String(value) }}
    </ACheckbox>
  </div>
</template>