Checkbox ​

<template>
  <p-checkbox>Checklist Label</p-checkbox>
</template>

<template>
  <p-checkbox>
    <div>Checklist Label</div>
    <p-caption>Text</p-caption>
  </p-checkbox>
</template>

<template>
  <p-checkbox disabled>
    Checkbox Label
  </p-checkbox>
</template>

<template>
  <p-checkbox readonly>
    Checkbox Label
  </p-checkbox>
</template>

<template>
  <p-checkbox v-model="modelA">Text</p-checkbox>
</template>

<template>
  <p-checkbox
    v-model="model"
    value="agree"
    unchecked-value="disagree">
    Active
  </p-checkbox>
</template>

<template>
  <div class="flex flex-col space-y-3">
    <p-checkbox v-model="selected" value="apple">Apple</p-checkbox>
    <p-checkbox v-model="selected" value="grape">Grape</p-checkbox>
    <p-checkbox v-model="selected" value="pineapple">Pineapple</p-checkbox>
    <p-checkbox v-model="selected" :value="{ id: 1, name: 'Tarjono' }">Object</p-checkbox>
    <p-checkbox v-model="selected" :value="['Item 1']">Array</p-checkbox>
  </div>
</template>

<template>
  <div class="flex flex-col space-y-3">
    <p-checkbox
      v-model="selectAll"
      :indeterminate="indeterminate">
      Select All
    </p-checkbox>

    <template v-for="item of items">
      <p-checkbox v-model="result" :value="item" class="ml-4">
        {{ item }}
      </p-checkbox>
    </template>
  </div>
</template>

<script setup>
  const items  = ref(['apple', 'grape', 'orange'])
  const result = ref([])

  const selectAll = computed({
    get () {
      return result.value.length === items.value.length
    },
    set (value) {
      if (selectAll.value !== value)
        result.value = value ? [...items.value] : []
    },
  })

  const indeterminate = computed(() => {
    return result.value.length > 0
      && result.value.length < items.value.length
  })
</script>

<template>
  <div class="flex flex-col space-y-3">
    <p-checkbox appearance="none" v-model="selected" value="Olivia Withness">
      <template #default>
        <p-card
          element="div"
          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
          sectioned>
          <div class="flex items-center space-x-3">
            <IconBee class="text-muted dark:text-dark-muted" />
            <div>
              Olivia Withness
              <p-caption>olivia@eth.com</p-caption>
            </div>
          </div>
        </p-card>
      </template>
    </p-checkbox>
    <p-checkbox appearance="none" v-model="selected" value="Hyuga Kojiro">
      <template #default>
        <p-card
          element="div"
          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
          sectioned>
          <div class="flex items-center space-x-3">
            <IconBee class="text-muted dark:text-dark-muted" />
            <div>
              Hyuga Kojiro
              <p-caption>hyuga@gmail.com</p-caption>
            </div>
          </div>
        </p-card>
      </template>
    </p-checkbox>
    <p-checkbox appearance="none" v-model="selected" value="Marsha Timoty" disabled>
      <template #default>
        <p-card
          element="div"
          class="px-4 py-2 hover:shadow-md hover:border-subtle hover:dark:border-dark-subtle ease-in-out duration-200 min-w-[223px]"
          sectioned>
          <div class="flex items-center space-x-3">
            <IconBee class="text-muted dark:text-dark-muted" />
            <div>
              Marsha Timoty
              <p-caption>timoty@marsha.com</p-caption>
            </div>
          </div>
        </p-card>
      </template>
    </p-checkbox>
  </div>
</template>