nb-checkbox

This is a checkbox group component for Vue.js 3+.

Loading component...

Installation

Yarn

yarn add @vlalg-nimbus/nb-inputs

Usage

import { createApp } from 'vue'
import App from './App.vue'

import NbInputComponents from '@vlalg-nimbus/nb-inputs'
import "@vlalg-nimbus/nb-inputs/dist/style.css";

const app = createApp(App)
app.use(NbInputComponents)
app.mount('#app')

To use, simply call the component, in this case it will be NbCheckbox or nb-checkbox.

Mode 1

<template>
  <NbCheckbox />
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

name	Value type	Default	Description
nbId (*)	String		Sets the id attribute to differentiate from other components
display	String	'b'	Defines the display type. Accepts ib and b.
tabIndex	Number, Array	0	Defines the tab index. Can be a number (applied to all items) or an array (one value per item). Set this property to make the checkboxes focusable by the keyboard.
hasTabIndexEnter	Boolean	true	Enables the checkboxes to be activated with the Enter key when focused.
hasTabIndexSpace	Boolean	true	Enables the checkboxes to be activated with the Space key when focused.
ariaLabel	String	'Alternate Text Button'	Defines the aria-label attribute for screen readers.
ariaAttrs	Object	{}	Allows passing custom aria attributes as an object. Keys will automatically receive the `aria-` prefix. Example: `{ 'describedby': 'help-id', 'required': 'true' }`
disabled	Boolean	false	Defines if the checkbox is disabled
groupName	String	''	Defines checkbox group name
options	Array		Defines the list of values. It is an array of objects `{ value: 'Value', text: 'Text' }`
currentOption	Array		Defines an array of selected values `string`. The value must exist in the list options, in the `key` field
theme	String	'light'	Defines the theme. Accepts dark and light. When theme is set, uses theme-specific color props.
borderRadius	Number	0	Defines border-radius for type `box`.
hoverEffect	Boolean	false	Defines whether the hover effect exists when passing over the checkbox without it being selected.
activeHoverEffect	Boolean	false	Defines whether the hover effect exists when passing over the checkbox while it is selected.
itemGap	Number	15	Defines the space between checkbox options.
internalGap	Number	6	Defines the space between the checkbox and the text.
scale	Number	1	Defines component scale (size).
type	String	'box'	Defines the checkbox type. Accepts box and circle.
background	Boolean	false	Defines if the checkbox is background type.
fontFamily	String	"'Lato', sans-serif"	Defines the font-family
fontSize	String	'1.6em'	Defines the font-size
fontWeight	Number	400	Defines the font-weight
lightTextColor	String	'#333333'	Defines the text color for light theme. Accepts Color name and Hex
lightColor	String	'#cccccc'	Defines the checkbox color for light theme. Accepts Hex color only
lightColorHover	String	'#bbbbbb'	Defines the checkbox hover color for light theme. Accepts Hex color only
darkTextColor	String	'#e0e0e0'	Defines the text color for dark theme. Accepts Color name and Hex
darkColor	String	'#555555'	Defines the checkbox color for dark theme. Accepts Hex color only
darkColorHover	String	'#666666'	Defines the checkbox hover color for dark theme. Accepts Hex color only

Events

name	Return type	Description
current-value	value	Fired when an update to the selected value is made, returns selected value.
changed	value	Fired when an update to the selected value is made, returns selected value.
clicked	nothing	Fired when a checkbox is clicked, returns nothing.

Example

Light Theme (default)

<template>
  <NbCheckbox
    nb-id="checkbox-light"
    display="b"
    group-name="checkbox-group-light"
    theme="light"
    :options="checkboxOptions"
    :current-option="currentCheckboxValues"
    light-text-color="#1e40af"
    light-color="#3b82f6"
    light-color-hover="#60a5fa"
    :hover-effect="true"
    :active-hover-effect="true"
    :border-radius="4"
    type="box"
    :background="false"
    @current-value="handleCheckboxChange($event)"
    @changed="handleCheckboxChange($event)"
    @clicked="logEvent()"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompCheckbox',
});

const checkboxOptions = [
  { value: 'option1', text: 'Option 1' },
  { value: 'option2', text: 'Option 2' },
  { value: 'option3', text: 'Option 3' }
];

const currentCheckboxValues = ref(['option1']);

const handleCheckboxChange = (value) => {
  currentCheckboxValues.value = value;
  console.log('Checkbox changed:', value);
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Dark Theme

<template>
  <NbCheckbox
    nb-id="checkbox-dark"
    display="b"
    group-name="checkbox-group-dark"
    theme="dark"
    :options="checkboxOptions"
    :current-option="currentCheckboxValues"
    dark-text-color="#a78bfa"
    dark-color="#8b5cf6"
    dark-color-hover="#7c3aed"
    :hover-effect="true"
    :active-hover-effect="true"
    :border-radius="4"
    type="circle"
    :background="true"
    @current-value="handleCheckboxChange($event)"
    @changed="handleCheckboxChange($event)"
    @clicked="logEvent()"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompCheckboxDark',
});

const checkboxOptions = [
  { value: 'option1', text: 'Option 1' },
  { value: 'option2', text: 'Option 2' },
  { value: 'option3', text: 'Option 3' }
];

const currentCheckboxValues = ref(['option2']);

const handleCheckboxChange = (value) => {
  currentCheckboxValues.value = value;
  console.log('Checkbox changed:', value);
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Nb Inputsnb-radio

Nb Inputsnb-input