NbCheckbox provides a clean, accessible checkbox input with optional label support and two-way binding via v-model.
vue
<template>
<NbCheckbox v-model="agreed" label="I agree to the terms and conditions" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const agreed = ref(false)
</script>Without label
Checkbox group
Wrap related checkboxes in NbCheckboxGroup to get a group label, consistent stacking, validation messages, and group-level disabled state, matching what NbRadio provides for radio buttons.
vue
<template>
<NbCheckboxGroup label="Interests" helper="Pick as many as you like">
<NbCheckbox v-model="interests.web" label="Web Development" />
<NbCheckbox v-model="interests.mobile" label="Mobile Development" />
<NbCheckbox v-model="interests.design" label="UI/UX Design" />
</NbCheckboxGroup>
</template>Horizontal group
Group validation
error, warning and helper are controlled props: bind them to your own validation state and the message (and red styling) clears as soon as the condition is met.
vue
<template>
<NbCheckboxGroup label="Required consent" :error="consentError">
<NbCheckbox v-model="consent" label="Terms of service" />
</NbCheckboxGroup>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const consent = ref(false)
const consentError = computed(() =>
consent.value ? undefined : 'You must accept the terms',
)
</script>