Switch

Use NbSwitch for settings that turn on or off. It requires a visible label and binds with v-model.

Preview

PreviewCode

Copy

<script setup lang="ts">
import { ref } from 'vue'
import { NbSwitch } from '@neobrut-vue/core'

const enabled = ref(true)
</script>

<template>
  <div class="demo-stack">
    <NbSwitch v-model="enabled" label="Launch alerts" />
    <p aria-live="polite">Alerts are {{ enabled ? 'on' : 'off' }}.</p>
  </div>
</template>

<style scoped>
.demo-stack { display: grid; gap: 1rem; justify-items: start; }
.demo-stack p { margin: 0; font-weight: 700; }
</style>

Usage

<NbSwitch v-model="alerts" label="Launch alerts" />

The underlying checkbox keeps its native keyboard and form behavior. Use NbCheckbox for selecting an option in a group or agreeing to a statement.