Checkbox

Basic Usage

View Source

<script setup lang="ts">
import { ref } from "vue";
import { UniCheckbox } from "unify-ui";

const checked1 = ref(true);
const checked2 = ref(false);
</script>

<template>
  <UniCheckbox v-model:checked="checked1" label="checked"></UniCheckbox>
  <UniCheckbox v-model:checked="checked2" label="not checked"></UniCheckbox>
</template>

Disabled

View Source

<script setup lang="ts">
import { ref } from "vue";
import { UniCheckbox } from "unify-ui";

const checked1 = ref(true);
const checked2 = ref(false);
</script>

<template>
  <UniCheckbox v-model:checked="checked1" label="checked & disabled" disabled></UniCheckbox>
  <UniCheckbox v-model:checked="checked2" label="not checked & disabled" disabled></UniCheckbox>
</template>

No Label

View Source

<script setup lang="ts">
import { UniCheckbox } from "unify-ui";
</script>

<template>
  <ul>
    <li>
      <UniCheckbox :checked="true"></UniCheckbox>
    </li>

    <li>
      <UniCheckbox :checked="false"></UniCheckbox>
    </li>
  </ul>
</template>

Indeterminate

View Source

<script setup lang="ts">
import { UniCheckbox } from "unify-ui";
</script>

<template>
  <ul>
    <li>
      <UniCheckbox :checked="true" indeterminate label="check"></UniCheckbox>
    </li>

    <li>
      <UniCheckbox :checked="false" indeterminate label="not checked"></UniCheckbox>
    </li>

    <li>
      <UniCheckbox :checked="true" disabled indeterminate label="check & disabled"></UniCheckbox>
    </li>

    <li>
      <UniCheckbox :checked="false" disabled indeterminate label="not check & disabled"></UniCheckbox>
    </li>
  </ul>
</template>

API

Properties

const props = withDefaults(
  defineProps<{
    label?: string;
    checked?: boolean;
    value?: Value;
    disabled?: boolean;
    indeterminate?: boolean;
  }>(),
  {
    label: "",
    value: void 0,
    disabled: false,
  }
);

Events

const emit = defineEmits<{
  (e: "update:checked", checked: boolean): void;
  (e: "change", checked: boolean): void;
}>();