nb-toggle

This is a toggle component for Vue.js 3+.

Loading component...

Installation

Yarn

yarn add @vlalg-nimbus/nb-selects

Usage

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

import NbSelectComponents from '@vlalg-nimbus/nb-selects'
import "@vlalg-nimbus/nb-selects/dist/style.css";

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

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

Mode 1

<template>
  <NbToggle />
</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
value	Boolean	false	Defines the initial state of the toggle (checked/unchecked)
display	String	'ib'	Defines the display type. Accepts ib (inline-block) and b (block)
disabled	Boolean	false	Defines if the toggle is disabled
tabIndex	Number	0	Defines the tab index. Set this property to make the toggle focusable by the keyboard.
hasTabIndexEnter	Boolean	true	Enables the toggle to be activated with the Enter key when focused.
hasTabIndexSpace	Boolean	true	Enables the toggle to be activated with the Space key when focused.
ariaLabel	String	'Toggle'	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' }`
theme	String	'light'	Defines the theme. Accepts dark and light. When theme is set, uses theme-specific color props.
lightSwitchColor	String	'#f5f5f5'	Defines the switch background color for light theme. Accepts Hex color only
lightSwitchColorActive	String	'#e0e0e0'	Defines the switch background color when active for light theme. Accepts Hex color only
lightThumbColor	String	'#ffffff'	Defines the thumb (circle) color for light theme. Accepts Hex color only
lightThumbColorActive	String	'#ffffff'	Defines the thumb (circle) color when active for light theme. Accepts Hex color only
lightDisabledBgColor	String	'#dfdfd9'	Defines the disabled background color for light theme. Accepts Hex color only
darkSwitchColor	String	'#2d2d2d'	Defines the switch background color for dark theme. Accepts Hex color only
darkSwitchColorActive	String	'#3d3d3d'	Defines the switch background color when active for dark theme. Accepts Hex color only
darkThumbColor	String	'#e0e0e0'	Defines the thumb (circle) color for dark theme. Accepts Hex color only
darkThumbColorActive	String	'#ffffff'	Defines the thumb (circle) color when active for dark theme. Accepts Hex color only
darkDisabledBgColor	String	'rgba(40, 42, 54, 1)'	Defines the disabled background color for dark theme. Accepts rgba or Hex color

Events

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

Example

Light Theme (default)

<template>
  <NbToggle
    nb-id="toggle-light"
    theme="light"
    :value="toggleValue"
    @changed="handleChange($event)"
    @current-value="handleCurrentValue($event)"
    @clicked="logEvent()"
  />
</template>

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

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

const toggleValue = ref(false);

const handleChange = (value) => {
  toggleValue.value = value;
  console.log('Toggle changed:', value);
};

const handleCurrentValue = (value) => {
  console.log('Current value:', value);
};

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

Dark Theme

<template>
  <NbToggle
    nb-id="toggle-dark"
    theme="dark"
    :value="toggleValue"
    @changed="handleChange($event)"
    @current-value="handleCurrentValue($event)"
    @clicked="logEvent()"
  />
</template>

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

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

const toggleValue = ref(true);

const handleChange = (value) => {
  toggleValue.value = value;
  console.log('Toggle changed:', value);
};

const handleCurrentValue = (value) => {
  console.log('Current value:', value);
};

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

Light Theme (Custom Colors)

<template>
  <NbToggle
    nb-id="toggle-light-custom"
    theme="light"
    :value="toggleValue"
    light-switch-color="#dbeafe"
    light-switch-color-active="#3b82f6"
    light-thumb-color="#bfdbfe"
    light-thumb-color-active="#ffffff"
    @changed="handleChange($event)"
  />
</template>

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

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

const toggleValue = ref(false);

const handleChange = (value) => {
  toggleValue.value = value;
  console.log('Toggle changed:', value);
};
</script>

Dark Theme (Custom Colors)

<template>
  <NbToggle
    nb-id="toggle-dark-custom"
    theme="dark"
    :value="toggleValue"
    dark-switch-color="#8b5cf6"
    dark-switch-color-active="#6d28d9"
    dark-thumb-color="#a78bfa"
    dark-thumb-color-active="#f3f4f6"
    @changed="handleChange($event)"
  />
</template>

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

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

const toggleValue = ref(true);

const handleChange = (value) => {
  toggleValue.value = value;
  console.log('Toggle changed:', value);
};
</script>

Disabled State

<template>
  <div>
    <NbToggle
      nb-id="toggle-disabled-off"
      theme="light"
      :value="false"
      :disabled="true"
    />
    <NbToggle
      nb-id="toggle-disabled-on"
      theme="light"
      :value="true"
      :disabled="true"
    />
  </div>
</template>

<script setup>
defineOptions({
  name: 'CompToggleDisabled',
});
</script>

Inline Usage

<template>
  <p>
    Text before
    <NbToggle
      nb-id="toggle-inline"
      theme="light"
      display="ib"
      :value="toggleValue"
      @changed="handleChange($event)"
    />
    text after
  </p>
</template>

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

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

const toggleValue = ref(false);

const handleChange = (value) => {
  toggleValue.value = value;
};
</script>

Block Display

<template>
  <NbToggle
    nb-id="toggle-block"
    theme="light"
    display="b"
    :value="toggleValue"
    @changed="handleChange($event)"
  />
</template>

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

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

const toggleValue = ref(false);

const handleChange = (value) => {
  toggleValue.value = value;
};
</script>

Nb Selectsnb-select

Nb Selectsnb-toggle-flip