Skip to content

PraxisCheckbox

A styled checkbox component. Supports binary (true/false) mode and array-based multi-check (like native <input type="checkbox">). Wraps PrimeVue's Checkbox.

Usage

vue
<script setup>
import { ref } from 'vue'
import { PraxisCheckbox } from 'praxis-vue-ui'

const agreed = ref(false)
const selected = ref([])
</script>

<template>
  <!-- Binary mode -->
  <PraxisCheckbox v-model="agreed" :binary="true" input-id="terms" />
  <label for="terms">I agree to the terms</label>

  <!-- Array mode -->
  <PraxisCheckbox v-model="selected" value="option-a" input-id="a" />
  <label for="a">Option A</label>
</template>

Props

PropTypeDefaultDescription
modelValuerequiredboolean | unknown[]In binary mode: a boolean. In array mode: the array of selected values.
binarybooleanfalseWhen true, modelValue is a boolean toggle. When false, modelValue is an array.
valueunknownundefinedThe value added/removed from the modelValue array when checked/unchecked (array mode only).
inputIdstringundefinedHTML id for the input element. Use with a matching label for attribute.
disabledbooleanfalseDisables the checkbox.

Emits

EventPayloadDescription
update:modelValueboolean | unknown[]Emitted on checkbox change.
changeEventNative change event.

Built with VitePress