Checkbox

ECheckbox enables users to pick an option by ticking a checkbox to indicate their preference, and toggle between checked, unchecked, and optional indeterminate states. Demo Here

Usage

<template>
  <ECheckbox v-model="isChecked">Checkbox</ECheckbox>
</template>

<script setup>
  const isChecked = ref(false);
</script>

Props

For ECheckbox component, the following props are available:

Prop	Type	Default	Note
id	String	-	HTML id attribute.
disabled	Boolean	false	Disables the ECheckbox content.
message	String	-	Adds a message below the checkbox.
modelValue	Boolean	false	If true, the element is checked.
trueValue	String	-	Value of the checkbox if it's checked.
falseValue	String	-	Value of the checkbox if it's unchecked.
validateOn	String	"input"	Triggers validation on @values: submit, input.
name	String	-	HTML name attribute.
rules	Array	-	Validation rules. For more info refer to Form Validation.
size	String	"md"	The ECheckbox element has three predefined sizes: sm, md, lg.
indeterminate	Boolean	false	Displays a state separate from either checked or unchecked. It only controls the style.
trueIcon	Object	-	Displays a true icon when the checkbox is checked. More Info here.
falseIcon	Object	-	Displays a false icon when the checkbox is unchecked. More Info here.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
state	String	-	Validates the user-provided data against established criteria and performs display validation. States can be none if no validation is necessary, danger if the selected is valid, or success if it is acceptable.
square	Boolean	false	Removes rounded corners of the element.

Emits

The ECheckbox component contains following emits.

Emit	Description
update:modelValue	Controls the checked status of the element.

Slots

The ECheckbox component provides a default slot that enable you to customize the content.

Slot	Description
default	The default Vue slot.
info	Adds an info to the checkbox (Can't change the checked state onClick).

---

Related Pages

• Custom Checkbox