BnCheckbox ​

BnCheckbox is a wrapper for <input type="checkbox"> elements.

Basic Usage ​

<bn-checkbox v-model="input" name="name">Name</bn-checkbox>

Input Attributes ​

The BnCheckbox component accepts all the attributes that a native <input> element accepts.

<bn-checkbox v-model="input" name="disabled" disabled>
  Disabled Checkbox
</bn-checkbox>

Value and Unchecked Value ​

By default, the BnCheckbox component will return true when checked and false when unchecked. You can customize this behavior by using the value and uncheckedValue props.

<bn-checkbox v-model="input" name="name" value="SELECTED" uncheckedValue="UNSELECTED">
  Custom value
</bn-checkbox>

Vee-Validate ​

BnCheckbox works with vee-validate out of the box.

<script setup lang="ts">
import { Form, ErrorMessage } from 'vee-validate';
import isRequired from '../rules';

const validationSchema = {
  terms: isRequired,
};
</script>

<template>
  <Form :validation-schema="validationSchema">
    <bn-checkbox name="terms">
      You accept our terms and conditions
    </bn-checkbox>
    <ErrorMessage name="terms" class="text-red-600"/>
  </Form>
</template>

Rules ​

If you want to validate a field without being in the context of a Form or an useForm, you can use the rules prop.

<script setup lang="ts">
import isRequired from '../rules';
</script>

<template>
  <bn-checkbox
    v-model="validate"
    name="validation"
    :rules="isRequired"
  >
    You accept our terms and conditions
  </bn-checkbox>
  <ErrorMessage name="validation" class="text-red-600"/>
</template>

Colors ​

You can change the color accent of the checkbox using the color prop.

<bn-checkbox name="selectedInput" color="lime" v-model="selectedInput">
    Color Checkbox
  </bn-checkbox>

Slots ​

default (label) ​

The underlying checkbox is wrapped by a label and the default slot gives it its text.

<bn-checkbox v-model="input"  name="name">
    <span class="text-xl">Name</span>
  </bn-checkbox>

Customization ​

There are two ways to customize the appearance of the BnCheckbox component:

classes prop ​

Every component has a classes prop that will accept an object where each key corresponds to an internal element of the component. The value of each key will be the classes that will be applied to that element. For the values, you can use strings, objects or arrays, the same way it works with Vue's class binding.

<bn-checkbox :classes="{ input: 'rounded-full' }">
  Name
</bn-checkbox>

Default styles will still be applied, but the classes you provide will take precedence, so you can use this to override any existing style.

The available keys for this component are:

• input: The <input type="checkbox"> element itself

Theming ​

You can change the default appearance or even add variants by editing the configuration of the TailwindCSS plugin.

plugins: [
    require('@tailwindcss/forms'),
    require('@headlessui/tailwindcss'),
    banano.tailwindPlugin({
      theme: {
        BnCheckbox: {
          '.bn-checkbox': {
            '@apply bg-green-600': {},
          }
        }
      }
    }),
  ],

You can find more information about customizing the library in Theme Customization.

API Reference ​

Props ​

type ValueType = undefined | boolean | string | number | Record<string, unknown>;

Events ​

This component does not emit any events, but it emits all the events from the underlying <input> element.

Slots ​