SkInputCheckbox

A customizable checkbox input component with optional label placement on the left or right.

Example Usage

Example

True / False Trigger

True / False Trigger

false

With Choices

Cheese

Salami

Bread

[]

<template>
  <sk-input-checkbox v-model="value" placement="left" label="True / False Trigger" class="mb-m" />
  <sk-input-checkbox
    v-model="value"
    placement="left"
    label="True / False Trigger"
    :disabled="true"
    class="mb-m"
  />
  {{ value }}
  <h3>With Choices</h3>
  <sk-input-checkbox v-model="value2" label="Cheese" value="Cheese" class="mb-m" />
  <sk-input-checkbox v-model="value2" label="Salami" value="Salami" class="mb-m" />
  <sk-input-checkbox v-model="value2" label="Bread" value="Bread" class="mb-m" />
  {{ value2 }}
</template>

<script setup>
import { ref } from 'vue';

const value = ref(false);
const value2 = ref([]);
</script>

Reference

Properties

Name	Type	Default	Description
v-model	Boolean, Array	false	The current value of the checkbox, for binding.
binary	Boolean	true	Whether the checkbox represents a binary true/false value.
label	String	'' (empty)	Optional label for the checkbox.
value	String, Number, Boolean	undefined	The value to be emitted on selection, useful for non-binary checks.
placement	String	'right'	Determines the placement of the label ('left' or 'right').
disabled	Boolean	false	Disables the checkbox if set to true.

Events

Name	Parameters	Description
@input	event	Emitted when the checkbox value changes.
@update:modelValue	event	Emitted with the new value when it changes.