Checkbox group component (TCheckboxGroup)

VueJs reactive checkbox group component with configurable classes, variants, and most common events. Friendly with utility-first frameworks like TailwindCSS..

Playground:


Basic example

<t-checkbox-group name="example" :options="['Option A', 'Option B', 'Option C']"></t-checkbox-group>

Props

PropertyTypeDefault valueDescription
value (v-model)Array[]The value for the checkbox element checked
idStringundefinedHTML attribute
autofocusBooleanundefinedHTML attribute
disabledBooleanundefinedHTML attribute
nameStringundefinedHTML attribute
readonlyBooleanundefinedHTML attribute
requiredBooleanundefinedHTML attribute
tabindex[String, Number]undefinedHTML attribute
groupWrapperTagString'div'The HTML tag to use to wrap the whole component
wrapperTagString'label'The HTML tag to use to wrap every single checkbox element
inputWrapperTagString'span'The HTML tag to use to wrap every single checkbox input
labelTagString'span'The HTML tag to use for the label of every single checkbox
options[Array, Object]undefinedThe options to list (see options format)
textAttributeStringundefinedOptional attribute from the option to use as the text
(see define the value/text attributes)
valueAttributeStringundefinedOptional attribute to use as the value of the option tag
(see define the value/text attributes)
classesObject{}The default CSS classes
fixedClassesObject{}Fixed CSS classes that will be merged with the active set of classes
variantsObjectundefinedThe different variants of classes the component have
variant[String, Object]undefinedThe variant that will be used

Classes for component

When the input has the wrapped setting, the classes, variants, etc. need to be an object with the following properties:

PropertyDescription
groupWrapperClasses for the wrapper of the whole component
wrapperClasses for the label HTML tag that wraps a single checkbox element
wrapperCheckedClasses to apply to the wrapper when the checkbox input is checked (optional)
inputWrapperClasses for the span that wraps the checkbox input
inputWrapperCheckedClasses to apply to the inputWrapper when the checkbox input is checked (optional)
labelClasses for the label that wraps the label prop
labelCheckedClasses for the label that wraps the label prop when checkbox input is checked (optional)
inputClasses for the checkbox input

*The "Checked" attributes are optional.

Example

const settings = {
  TCheckboxGroup: {
    classes: {
      groupWrapper: 'flex flex-col',
      label: 'text-sm uppercase mx-2 text-gray-700',
      input: 'text-blue-500 transition duration-100 ease-in-out border-gray-300 rounded shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 focus:ring-offset-0  disabled:opacity-50 disabled:cursor-not-allowed',
      inputWrapper: 'inline-flex',
      wrapper: 'flex items-center',
      // labelChecked: '',
      // inputWrapperChecked: '',
      // wrapperChecked: '',
    }
    // Variants and fixed classes in the same `object` format ...
  },
  // ...
}

Vue.use(VueTailwind, settings)

If you use the settings in the example above the component will be rendered like this:

Options format

The component accepts the options in different formats:

Array of objects

<!-- Value, text attributes (preferred default) -->
<t-checkbox-group :options="[{ value: 1, text: 'Option 1' }, { value: 2, text: 'Option 2' }]" name="checkbox" />
<!-- id instead of value as attribute -->
<t-checkbox-group :options="[{ id: 1, text: 'Option 1' }, { id: 2, text: 'Option 2' }]" name="checkbox"  />
<!-- label instead of text as attribute -->
<t-checkbox-group :options="[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }]" name="checkbox"  />

<!-- All the examples above will render: -->
<div class="">
  <label for="checkbox-1" class="">
    <span class="">
      <input id="checkbox-1" value="1" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Option 1</span>
  </label>
  <label for="checkbox-2" class="">
    <span class="">
      <input id="checkbox-2" value="2" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Option 2</span>
  </label>
</div>

Object with value:text pairs

<t-checkbox-group :options="{ A: 'Option A', B: 'Option B', C: 'Option C' }" name="checkbox" />

<!-- Will Render: -->
<div class="">
  <label for="checkbox-a" class="">
    <span class="">
      <input id="checkbox-a" value="A" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Option A</span>
  </label>
  <label for="checkbox-b" class="">
    <span class="">
      <input id="checkbox-b" value="B" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Option B</span>
  </label>
  <label for="checkbox-c" class="">
    <span class="">
      <input id="checkbox-c" value="C" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Option C</span>
  </label>
</div>

Array of strings

<t-checkbox-group :options="['Red', 'Blue', 'Yellow']" />

<!-- Will Render: -->
<div class="">
  <label for="checkbox-red" class="">
    <span class="">
      <input id="checkbox-red" value="Red" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Red</span>
  </label>
  <label for="checkbox-blue" class="">
    <span class="">
      <input id="checkbox-blue" value="Blue" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Blue</span>
  </label>
  <label for="checkbox-yellow" class="">
    <span class="">
      <input id="checkbox-yellow" value="Yellow" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Yellow</span>
  </label>
</div>

Array of numbers

<t-checkbox-group :options="[18, 19, 20]" />

<!-- Will Render: -->
<div class="">
  <label for="checkbox-18" class="">
    <span class="">
      <input id="checkbox-18" value="18" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">18</span>
  </label>
  <label for="checkbox-19" class="">
    <span class="">
      <input id="checkbox-19" value="19" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">19</span>
  </label>
  <label for="checkbox-20" class="">
    <span class="">
      <input id="checkbox-20" value="20" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">20</span>
  </label>
</div>

Define the value/text attributes

<t-checkbox-group
  :options="[
    { key: 'A', description: 'One option' },
    { key: 'B', description: 'Another option' },
    { key: 'C', description: 'One more' },
  ]"
  value-attribute="key"
  text-attribute="description"
/>

<!-- Will Render: -->
<div class="">
  <label for="checkbox-a" class="">
    <span class="">
      <input id="checkbox-a" value="A" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">One option</span>
  </label>
  <label for="checkbox-b" class="">
    <span class="">
      <input id="checkbox-b" value="B" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">Another option</span>
  </label>
  <label for="checkbox-c" class="">
    <span class="">
      <input id="checkbox-c" value="C" type="checkbox" name="checkbox" class="">
    </span>
    <span class="">One more</span>
  </label>
</div>

Events

EventArgumentsDescription
inputString (The current value of the checkbox group)Emitted every time the value of the v-model change
changeString (The current value of the checkbox group)Emitted every time the value of the v-model change
focusFocusEventEmitted when the any of the options are focused
blurFocusEventEmitted when the any of the options are blurred

Default slot

The label of every single option can be changed by using the default slot, check this example:

I am:
<t-checkbox-group :options="['Angry', 'Happy', 'Cool']" name="label-examle">
  <template slot-scope="props">
    <template v-if="props.isChecked">
      <span v-if="props.label === 'Angry'">
        😡
      </span>
      <span v-else-if="props.label === 'Happy'">
        😃
      </span>
      <span v-else-if="props.label === 'Cool'">
        😎
      </span>
    </template>
    <template v-else>
      {{ props.label }}
    </template>
  </template>
</t-checkbox-group>
I am:

Sign up for our newsletter

Stay up-to-date on news and updates about this project by email.

I will never spam or share your email under any circustance.