jio-checkbox

Props

Prop name	Description	Type	Values	Default
id	An ID must be supplied	string	-
required	Whether the checkbox must be checked @values true, false	boolean	-
isInvalid	Whether validation determined the checkbox state is invalid @values true, false	boolean	-
inline	Whether the checkbox should render inline @values true, false	boolean	-
disabled	Whether the checkbox is disabled @values true, false	boolean	-
theme	The desired palette @values "primary", "secondary"	Theme	-	"primary"

Slots

Name	Description	Bindings
default

---

View on Gitlab

General

This component is based on the Bootstrap checkbox.

View design in Figma

Code examples

Two simple inline checkboxes.

<template> <div class="jio-core"> <jio-form> <jio-checkbox id="example-0-0" v-model="form0.checkbox0" inline> <jio-form-label forId="example-0-0" hideRequiredHint isCheck> Checkbox 0 </jio-form-label> </jio-checkbox> <jio-checkbox id="example-0-1" v-model="form0.checkbox1" inline> <jio-form-label forId="example-0-1" hideRequiredHint isCheck> Checkbox 1 </jio-form-label> </jio-checkbox> </jio-form> </div> </template> <script setup lang="ts"> import { reactive } from "vue"; const form0 = reactive({ checkbox0: false, checkbox1: false, }); </script>

Two simple stacked checkboxes.

<template> <div class="jio-core"> <jio-form> <jio-checkbox id="example-1-0" v-model="form1.checkbox0"> <jio-form-label forId="example-1-0" hideRequiredHint isCheck> Checkbox 0 </jio-form-label> </jio-checkbox> <jio-checkbox id="example-1-1" v-model="form1.checkbox1"> <jio-form-label forId="example-1-1" hideRequiredHint isCheck> Checkbox 1 </jio-form-label> </jio-checkbox> </jio-form> </div> </template> <script setup lang="ts"> import { reactive } from "vue"; const form1 = reactive({ checkbox0: false, checkbox1: false, }); </script>