PubCheckbox

This is a checkbox component. It is used to display a checkbox field to select an option from a list of options.

Default Usage

Default checkbox

Checked state

<template>
  <pub-checkbox
    v-model="check"
    label="Default checkbox"
  />
  <pub-checkbox
    v-model="checked"
    label="Checked state"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubCheckbox } from 'vuelicity'

const check = ref(false)
const checked = ref(true)
</script>

Disabled

Prop - disabled Usage

The disabled prop is used to disable the checkbox field. It can be a boolean value.

Disabled checkbox

Checked disabled state

<template>
  <pub-checkbox
    v-model="check"
    disabled
    label="Disabled checkbox"
  />
  <pub-checkbox
    v-model="checked"
    disabled
    label="Checked disabled state"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubCheckbox } from 'vuelicity'

const check = ref(false)
const checked = ref(true)
</script>

Checkbox link

I agree with the terms and conditions.

<template>
  <pub-checkbox v-model="check">
    I agree with the
    <a
      class="text-blue-600 hover:underline"
      href="#"
    >
      terms and conditions.
    </a>
  </pub-checkbox>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubCheckbox } from 'vuelicity'

const check = ref(false)
</script>

Bordered

Prop - bordered Usage

The bordered prop is used to add a border to the checkbox field. It can be a boolean value.

Default checkbox

Checked state

<template>
  <pub-checkbox
    v-model="check"
    label="Default checkbox"
    bordered
  />
  <pub-checkbox
    v-model="checked"
    label="Checked state"
    bordered
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubCheckbox } from 'vuelicity'

const check = ref(false)
const checked = ref(true)
</script>

Bordered with description

16GB unified memory

Seamlessly handle multitasking, large apps.

1TB SSD storage

Get ultra-fast storage with 1TB of SSD space.

<template>
  <pub-checkbox
    v-model="check"
    bordered
  >
    16GB unified memory
    <template #helper>
      Seamlessly handle multitasking, large apps.
    </template>
  </pub-checkbox>
  <pub-checkbox
    v-model="checked"
    bordered
  >
    1TB SSD storage
    <template #helper>
      Get ultra-fast storage with 1TB of SSD space.
    </template>
  </pub-checkbox>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubCheckbox } from 'vuelicity'

const check = ref(false)
const checked = ref(true)
</script>

Checkbox group

Apple

Banana

Orange

Strawberry

Selected fruits: [ "Banana", "Strawberry" ]

Mercury

Venus

Earth

Mars

Jupiter

Saturn

Uranus

Neptune

Selected planets: [ 3 ]

<template>
  <div class="space-y-2">
    <pub-checkbox
      v-for="(fruit, i) in fruits"
      :key="i"
      v-model="selectedFruits"
      :label="fruit"
      :value="fruit"
      name="fruits"
    />
    <p class="mb-4 text-sm text-grey-500">
      Selected fruits: {{ selectedFruits }}
    </p>
    <pub-checkbox
      v-for="(name, id) in planets"
      :key="id"
      v-model="selectedPlanets"
      :label="name"
      :value="parseInt(id)"
      name="planets"
    />
    <p class="text-sm text-grey-500">
      Selected planets: {{ selectedPlanets }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubCheckbox } from 'vuelicity'

const selectedFruits = ref(['Banana', 'Strawberry'])
const fruits = [
    'Apple',
    'Banana',
    'Orange',
    'Strawberry',
]

const selectedPlanets = ref([3])
const planets = {
    1: 'Mercury',
    2: 'Venus',
    3: 'Earth',
    4: 'Mars',
    5: 'Jupiter',
    6: 'Saturn',
    7: 'Uranus',
    8: 'Neptune',
}
</script>

Helper Text

Slot - helper Usage

The helper slot is used to display helper text below the checkbox field.

Free shopping via PehliBazar

You will get 10% discount for your first order.

<template>
  <pub-checkbox
    v-model="check"
    label="Free shopping via PehliBazar"
  >
    <template #helper>
      You will get 10% discount for your first order.
    </template>
  </pub-checkbox>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubCheckbox } from 'vuelicity'

const check = ref(false)
</script>

Styling Checkbox

Prop - class, wrapperClass, labelClass Usage

The class, wrapperClass, and labelClass props are used to add additional classes to the checkbox field, outer wrapper, and label element, respectively.

Custom styled checkbox

<template>
  <pub-checkbox
    v-model="check"
    label="Custom styled checkbox"
    class="text-amber-600 dark:text-green-500 bg-amber-50 dark:bg-green-900 border-amber-400 dark:border-green-600 focus:ring-amber-500 dark:focus:ring-green-400"
    label-class="font-bold text-amber-900 dark:text-green-200"
    wrapper-class="border-2 border-amber-700 dark:border-green-400 bg-amber-300 dark:bg-green-800 rounded-lg p-3"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { PubCheckbox } from 'vuelicity'

const check = ref(false)
</script>

Reference

Properties

Name	Type	Default	Description	Options
disabled	Boolean	false	Disables the checkbox field.
label	String	''	Text label displayed beside the checkbox.
labelClass	String	''	Additional classes for the label element.
class	String	''	Additional classes for the checkbox input element.
wrapperClass	String	''	Additional classes for the outer wrapper.
name	String	undefined	HTML name attribute for the checkbox input.
value	String, Number, Boolean, Object	undefined	HTML value attribute for the checkbox input.

Slots

Name	Description
default	Custom label content displayed beside the checkbox.
helper	Slot for helper text displayed below the checkbox.