Checkbox

A Native <input type="checkbox" /> to check items or multiple items at once, once again batteries included! This wil also cover Checkbox groups!

Preview & Playground 🖼️

Here you may find a preview of the component, with error & possible variants.

🏄 Click to expand the code

vue

<script setup lang="ts">
import { Checkbox } from '@flavorly/vanilla-components'
import { ref } from 'vue'

const value = ref('accepted')
const value2 = ref(true)
const valueMultiple = ref([])
</script>

<template>
  <PreviewWrapper>
    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <!-- Regular -->
      <Checkbox
        v-model="value"
        value="accepted"
        checked-value="accepted"
        unchecked-value="notAccepted"
        feedback="Im useful helper out here, choose wisely"
        align="center-center"
      />
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-10">
      <Checkbox
        v-model="value"
        value="accepted"
        checked-value="accepted"
        unchecked-value="notAccepted"
        feedback="Im disabled"
        align="center-center"
        :disabled="true"
      />
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value) }}</pre>
    </div>

    <div class="h-1 my-5" />

    <div class="flex items-center justify-center space-x-2">
      <!-- Multiple -->
      <Checkbox
        v-model="valueMultiple"
        value="accepted"
        checked-value="accepted"
        unchecked-value="notAccepted"
        class="inline-flex"
      />

      <Checkbox
        v-model="valueMultiple"
        value="accepted2"
        checked-value="accepted2"
        unchecked-value="notAccepted2"
        class="inline-flex"
      />
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(valueMultiple) }}</pre>
    </div>

    <div class="h-1 my-5" />

    <!-- Errors -->
    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <Checkbox
        v-model="value2"
        errors="Sorry for this name is already taken"
        feedback="I only show when i dont have errors"
        align="center-center"
      />
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value2) }}</pre>
    </div>
  </PreviewWrapper>
</template>

Props 📥

Props available for this component extending the default variant & global props.

Prop	Description	Accepted Values	Default
`modelValue`	The value for the element	`Any`	`undefined`
`checked`	Default state for checkbox	`Boolean`	`false`
`value`	Initial value	`[Boolean,Any]`	`false'`
`checkedValue`	Checked Value	`[Boolean,Any]`	`true'`
`uncheckedValue`	Un-checked Value	`[Boolean,Any]`	`false'`
`align`	Position of the checkbox	`['left-top', 'left-center', 'left-bottom','right-bottom', ..]`	`left-top'`

Slots 🧬

Current slots available for this component are the following:

Slot `default`

The default slot is used to display the label of the checkbox, but you can be creative to do whatever you want.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`
`hasErrors`	If it has errors	`Boolean`

Slot `errors`

Slot that holds the error messages when the component errors prop is defined.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`
`hasErrors`	If it has errors	`Boolean`

Slot `feedback`

Slot that holds the feedback messages when the component feedback prop is defined. When showing errors the feedback will be hidden by default, and vice-versa.

Attribute	Description	Type
`errors`	The errors being injected	`[String, Array, Undefined]`
`feedback`	The feedback message	`[String, Undefined]`
`hasErrors`	If it has errors	`Boolean`

Events 🚇

Here you may find the events emitted by this component.

Event	Description	Value
`update:modelValue`	When the value changes	`any`

| click | When element is clicked | ClickEvent |

Checkbox Groups

A Checkbox group is a group of checkboxes, it's a wrapper for multiple checkboxes, it's a way to group checkboxes together. A nice use-case for this, is whenever you want to select multiple items at once, like a list of items.

🏄 Click to expand the code

vue

<script setup lang="ts">
import { CheckboxGroup } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref([])
const value2 = ref([])
</script>

<template>
  <PreviewWrapper>
    <div>
      <CheckboxGroup
        v-model="value"
        name="skills"
        :options="[
          { text: 'Vue', value: 'vue', description: 'Is Vue your stack?' },
          { text: 'React', value: 'react', description: 'React just sucks right?' },
          { text: 'Angular', value: 'angular', description: 'Lets not talk about angular' },
          { text: 'Svelte', value: 'svelte', description: 'Maybe we can try some day' },
          { text: 'Ember', value: 'ember', description: 'Good stuff, but... vue' },
        ]"
      />
    </div>
    <div class="flex items-center justify-center mx-auto text-center mt-2">
      <pre class="text-xs">{{ JSON.stringify(value) }}</pre>
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      Everything disabled
    </div>

    <div>
      <CheckboxGroup
        v-model="value2"
        :disabled="true"
        name="skills"
        :options="[
          { text: 'Cant', value: 'cat', description: 'Try it?' },
          { text: 'Touch', value: 'touch', description: 'Try it again?' },
          { text: 'This', value: 'this', description: 'You shouldnt be allowed' },
          { text: 'tun', value: 'tun', description: 'Hum, not now' },
          { text: 'tunnene', value: 'tunnene', description: 'Ok, this is awkeredddd' },
          { text: 'yeah', value: 'yeah', description: 'Ok', disabled: true },
        ]"
      />
    </div>

    <div class="flex items-center justify-center mx-auto text-center mt-2">
      Only certain options disabled
    </div>

    <div>
      <CheckboxGroup
        v-model="value2"
        name="skills"
        :options="[
          { text: 'Im allowed', value: 'allowed1' },
          { text: 'Im also allowed', value: 'allowed2' },
          { text: 'Im Forbidden', value: 'forbidden1', disabled: true },
          { text: 'Im allowed again', value: 'allowed3' },
          { text: 'Im Forbidden again', value: 'forbidden2', disabled: true },
        ]"
      />
    </div>
  </PreviewWrapper>
</template>

Checkbox Group Props 📥

Props available for this component extending the default variant & global props.

Prop	Description	Accepted Values	Default
`modelValue`	A v-model for the elements	`Array`	`undefined`
`options`	Array of options for the select	`Array`	`undefined`
`normalizeOptions`	If we should normalize the options	`Array`	`undefined`
`valueAttribute`	Value Attribute key to search on options	`String`	`undefined`
`textAttribute`	Label Attribute key to search on options	`String`	`undefined`

Checkbox Group Options

The options for the checkbox group, works exactly the same way as the options for RichSelect. Passing options without any structure defined, will require you to fill the valueAttribute and textAttribute props so we can grab them from your options

Here is a small example of normalized options:

[
    {
    value: 'batman',
    text: 'Batman',
    description: 'The Dark Knight',
    },
    {
        value: 'robin',
        text: 'Robin',
        description: 'The Dark Knight\'s sidekick',
    },
]

Checkbox #

Preview & Playground 🖼️ #

Props 📥 #

Slots 🧬 #

Slot default #

Slot errors #

Slot feedback #

Events 🚇 #

Checkbox Groups #

Checkbox Group Props 📥 #

Checkbox Group Options #