PxCheckbox

A styled checkbox component. Supports binary (true/false) mode and array-based multi-check (like native <input type="checkbox">). Built as a self-contained component (no external checkbox library).

Usage

Demo

Binary Mode

I agree to the terms

Value: false

Array Mode

Option A

Option B

Selected: []

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

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

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

  <!-- Array mode -->
  <PxCheckbox v-model="selected" value="option-a" input-id="a" />
  <label for="a">Option A</label>
  <PxCheckbox v-model="selected" value="option-b" input-id="b" />
  <label for="b">Option B</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.