Checkbox input (TCheckbox)

VueJs reactive <input type="checkbox" /> component with configurable classes, variants, and most common events. Friendly with utility-first frameworks like TailwindCSS..

Playground:

Basic example

<div class="flex">
  <label class="flex items-center">
    <t-checkbox name="options" value="a" />
    <span class="ml-2 text-sm">Option A</span>
  </label>
  <label class="flex items-center ml-2">
    <t-checkbox name="options" value="b" />
    <span class="ml-2 text-sm">Option B</span>
  </label>
</div>

Props

PropertyTypeDefault valueDescription
model (v-model)[String, Object, Number, Boolean, Array]undefinedThe element using for the v-model
value[String, Object, Number, Boolean, Array]trueThe value for the checkbox element when checked
uncheckedValue[String, Object, Number, Boolean, Array]falseThe value for the checkbox element when unchecked
checked[Boolean, String]falseHTML attribute
idStringundefinedHTML attribute
autofocusBooleanundefinedHTML attribute
disabledBooleanundefinedHTML attribute
nameStringundefinedHTML attribute
readonlyBooleanundefinedHTML attribute
requiredBooleanundefinedHTML attribute
tabindex[String, Number]undefinedHTML attribute
wrappedBooleanundefinedIf set the input will be wrapped in a div and will add some exra HTML (see wrap checkbox)
wrapperTagString'label'The HTML tag to use to wrap the input when wrapped is set to true
labelString'label'When the input is wrapped the label is added as sibling of the input
labelTagString'span'The HTML tag to use for the label prop
classes[String, Array, Object]'form-checkbox'The default CSS classes
fixedClasses[String, Array, Object]undefinedFixed 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

Wrap checkbox

This component accepts the wrapped setting (or prop) that when set it will add some extra HTML tags that make the component even more flexible.

Remember that the component can set as "wrapped" when installed or by using the wrapped prop (see wrap inputs for more info):

// When installed
const settings = {
  TCheckbox: {
    wrapped: true,
    // classes, variants, etc...
  },
  // ...
}

Vue.use(VueTailwind, settings)

<!-- // Using the wrapped prop -->
<t-checkbox wrapped />

A wrapped checkbox input will be rendered like this:

<label class="">
  <span class="">
    <input type="checkbox" class="">
  </span>
  <span class="">Label of the checkbox</span>
</label>

Classes for wrapped input

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

PropertyDescription
wrapperClasses for the label HTML tag that wraps the whole component
wrapperCheckedClasses to apply to the wrapper when the checkbox input is checked
inputWrapperClasses for the span that wraps the checkbox input
inputWrapperCheckedClasses to apply to the inputWrapper when the checkbox input is checked
inputClasses for the checkbox input
labelClasses for the label that wraps the label prop
labelCheckedClasses for the label that wraps the label prop when checkbox input is checked

The "Checked" attributes are optional.

Example

const settings = {
  TCheckbox: {
    wrapped: true,
    classes: {
      label: 'text-sm uppercase mx-2 text-gray-700',
      input: 'form-checkbox transition duration-150 ease-in-out',
      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:

Use a label

When the TCheckbox component has the wrapped setting set it accepts a label prop that is added as a sibling of the input

<t-checkbox wrapped label="my own option" name="example-2">
<t-checkbox wrapped label="my own option 2" name="example-2">

Label slot

The label can be also added by using the default slot.

I am: 
<t-checkbox wrapped name="example-3">
😡
</t-checkbox>
<t-checkbox wrapped name="example-3">
😀
</t-checkbox>
I am:

Events

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