Checkbox #

<template>
  <div class="flex justify-between items-end">
    <HcCheckbox
      v-model="checked"
      label="Checkbox"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcCheckbox } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const checked = ref(false);
</script>

<template>
  <div class="flex flex-col">
    <HcCheckbox
      v-model="value1"
      label="Disabled checked"
      disabled
    />

    <HcCheckbox
      v-model="value2"
      label="Disabled unchecked"
      disabled
      class="mt-4"
    />

    <HcCheckbox
      v-model="value3"
      label="Readonly checked"
      readonly
      class="mt-4"
    />

    <HcCheckbox
      v-model="value4"
      label="Readonly unchecked"
      readonly
      class="mt-4"
    />

    <HcCheckbox
      v-model="value5"
      label="Indeterminate"
      indeterminate
      class="mt-4"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcCheckbox } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(true);
const value2 = ref(false);
const value3 = ref(true);
const value4 = ref(true);
const value5 = ref(true);
</script>

<template>
  <div class="flex flex-col">
    <HcCheckbox
      v-model="value1"
      label="Checkbox 1"
      error
    />

    <HcCheckbox
      v-model="value2"
      label="Checkbox 2"
      :error-msg="!value2 ? 'This field is required' : ''"
      class="mt-4"
    />
  </div>
</template>

<script lang="ts" setup>
import { HcCheckbox } from '@deeepvision/hope-component-kit';
import { ref } from 'vue';

const value1 = ref(false);
const value2 = ref(false);
</script>