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
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValuerequired | boolean | unknown[] | — | In binary mode: a boolean. In array mode: the array of selected values. |
| binary | boolean | false | When true, modelValue is a boolean toggle. When false, modelValue is an array. |
| value | unknown | undefined | The value added/removed from the modelValue array when checked/unchecked (array mode only). |
| inputId | string | undefined | HTML id for the input element. Use with a matching label for attribute. |
| disabled | boolean | false | Disables the checkbox. |
Emits
| Event | Payload | Description |
|---|---|---|
| update:modelValue | boolean | unknown[] | Emitted on checkbox change. |
| change | Event | Native change event. |