Checkbox

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download checkbox -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox";

const args = {
  "checked": false,
  "disabled": false,
  "indeterminate": false,
};
</script>

<template>
  <Checkbox
    :model-value="args.indeterminate ? 'indeterminate' : args.checked"
    :disabled="args.disabled"
    @update:model-value="
      (next) => {
        args.checked = next === true;
        args.indeterminate = next === 'indeterminate';
      }
    "
  />
</template>

Examples

Default

<script setup lang="ts">
import { ref } from "vue";
import { Checkbox } from "@/components/ui/checkbox";

const args = {
  "disabled": false,
  "checked": undefined,
  "indeterminate": false,
};
const isChecked = ref(false);
</script>

<template>
  <Checkbox
    :checked="args.checked"
    v-model="isChecked"
    :disabled="args.disabled"
    :indeterminate="args.indeterminate"
  />
</template>

Disabled

<script setup lang="ts">
import { ref } from "vue";
import { Checkbox } from "@/components/ui/checkbox";

const args = {
  "disabled": true,
};
const isChecked = ref(false);
</script>

<template>
  <Checkbox v-model="isChecked" :disabled="args.disabled" />
</template>

Checked

<script setup lang="ts">
import { ref } from "vue";
import { Checkbox } from "@/components/ui/checkbox";

const args = {
  "checked": true,
};
const isChecked = ref(true);
</script>

<template>
  <Checkbox :checked="args.checked" v-model="isChecked" />
</template>

Checked Disabled

<script setup lang="ts">
import { ref } from "vue";
import { Checkbox } from "@/components/ui/checkbox";

const args = {
  "checked": true,
  "disabled": true,
};
const isChecked = ref(true);
</script>

<template>
  <Checkbox
    :checked="args.checked"
    :disabled="args.disabled"
    v-model="isChecked"
  />
</template>

Indeterminate

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox";

const args = {
  "indeterminate": true,
};
</script>

<template>
  <Checkbox :indeterminate="args.indeterminate" />
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.