Base Checkbox

BaseCheckbox is a customizable checkbox component that allows you to use predefined styles or use your own styles to create a new checkbox easily with ready states to use.

Props

DefaultChecked

Basically you can control if the checkbox starts checked or not by using the defaultChecked prop. This prop is a boolean and the default value is false.

<BaseCheckbox defaultChecked />

Color

There are some predefined colors that you can use to style the checkbox easily. The available colors are:

<BaseCheckbox color="primary" />

::

If you don't find the color you want, you can use the variantColor, bgHoverColor, and checkColor props to customize the checkbox as you want. Look an example below:

<BaseCheckbox
    variantColor="purple"
    bgHoverColor="#800080"
    checkColor="#D8BFD8"
/>

Size

You can control the size of the checkbox using the size prop. The available sizes are:

<BaseCheckbox size="small" />

If you want to use a custom size, you can use the size prop with the value in pixels, rem, em, etc.

<BaseCheckbox size="100px" />

Look that the check icon keeps the same size... you can customize it using the checkIconClass with sizes from "font-awesome-icons" that the check is being used. (Sizing Icons)

<BaseCheckbox size="100px" checkIconClass="fa-5x" />

Other way to customize the size of the check icon is using the slot checkIcon creating yourself icon and styles. You can see an example about it in the slots section.

Disabled

You can disable the checkbox using the disabled prop. The default value is false.

<BaseCheckbox disabled />

Label

You can add a label to the checkbox using the label prop. The default value is an empty string.

<BaseCheckbox label="Label" />

Events

The BaseCheckbox component emits the following events:

• checked: Emitting the value of the checkbox as a boolean when the checkbox is checked or unchecked
• key: Emitting the value of the checkbox as a string when the checkbox is checked or unchecked
• change: Native change event from the input checkbox
• click: Native click event from the input checkbox
• focus: Native focus event from the input checkbox
• focusout: Native focusout event from the input checkbox
• keydown: Native keydown event from the input checkbox
• keyup: Native keyup event from the input checkbox
• mousedown: Native mousedown event from the input checkbox
• mouseup: Native mouseup event from the input checkbox
• mouseover: Native mouseover event from the input checkbox
• mouseout: Native mouseout event from the input checkbox
• mouseenter: Native mouseenter event from the input checkbox
• mouseleave: Native mouseleave event from the input checkbox

<BaseCheckbox
    @change="onChange"
    @checked="onChecked"
    @key="onKey"
/>

Need other events? You can contact me or contribute.

Slots

You can customize the checkbox using the slots checkmark, label, and checkIcon.

checkmark

You can customize the checkmark using the checkmark slot. This slot is a scoped slot that receives the checked prop as a boolean.

<BaseCheckbox defaultChecked>
    <template #checkmark="{ checked }">
        <span>{{ checked ? '✅' : '❌' }}</span>
    </template>
</BaseCheckbox>

label

You can customize the label using the label slot. This slot is a scoped slot that receives the checked prop as a boolean.

<BaseCheckbox defaultChecked>
    <template #label="{ checked }">
        <span>{{ checked ? 'Checked' : 'Unchecked' }}</span>
    </template>
</BaseCheckbox>

checkIcon

You can customize the check icon using the checkIcon slot. This slot is a scoped slot that receives the checked prop as a boolean.

<BaseCheckbox defaultChecked>
    <template #checkIcon="{ checked }">
        <i :class="checked ? 'fas fa-check' : 'fas fa-times'"></i>
    </template>
</BaseCheckbox>