Custom Checkbox

If you're looking for more appealing and sophisticated designs for your forms, you can use our ECheckboxCustom to deliver a combination of beauty and utility. Demo Here

Usage

<template>
  <ECheckboxCustom
      :contents="checkboxContents"
      v-model="selectedValue"
  />
</template>

<script setup>
  const checkboxContents = ref([
    {
      title: "Graphic design",
      value: "g-design",
    },
    {
      title: "Web design",
      value: "d-design",
    },
  ]);
  const selectedValue = ref();
</script>

NOTE

To display the ECheckboxCustomelement, the title property must be present. All other attributes are optional.

with icon

  const contents = [{
  title: "Graphic Design",
  value: "g-design",  // if not defined, the index of item will be used.
  description: "Innovate. Inspire. Impact.",
  icon: {
      name: "Global",
      iconPack: "iconsax",
      size: 30,
      color: "#ABAFE6",
      type: "bulk",
  }
}];

with image

  const contents = [{
  title: "Graphic Design",
  value: "g-design",  // if not defined, the index of item will be used.
  description: "Innovate. Inspire. Impact.",
  img: {
      src: "/graphic.jpg",
      alt: "graphic design",
      class: "",
  }
}];

Props

For ECheckboxCustom component, the following props are available:

Prop	Type	Default	Note
modelValue	Array	-	Checked Item(s).
contents	Array	-	Checkbox content.
label	String	-	Component's label
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
actionButton	Boolean	false	Displays the checkbox button.
message	String	-	Adds a message below the checkbox.
vertical	Boolean	false	It organizes your checkbox vertically.
disabled	Boolean	false	Disables the ECheckboxCustom content.
tickBadge	Boolean	false	Displays a tick mark if the state if true.
validateOn	String	"input"	Triggers validation on @values: submit, input.
name	String	-	HTML name attribute..
grow	Boolean	false	Makes the checkbox expand to fit the full container width.
rules	Array	-	Validation rules. For more info refer to Form Validation.
size	String	"md"	The ECheckboxCustom element has three predefined sizes: sm, md, lg.
square	Boolean	false	Removes rounded corners of the element.
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.

Emits

The ECheckboxCustom component contains following emits.

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

Related Pages

• Checkbox