Nova

Appearance

Checkbox ​

Checkboxes enable users to choose multiple items from a list or mark a single item as selected.

Import ​

Importing NOptionsGroup is not mandatory, but it provides a simple way of displaying label, errors, success state and others.

ts
import {NCheckbox, NOptionsGroup} from '@nova-org/components'

Usage ​

When using multiple checkboxes, your v-model will become array of selected options.

Select your ideal travelling ideas
[]
Code
vue
<template>
  <n-options-group label="Select your ideal travelling ideas">
    <n-checkbox v-model="modelValue" value="solo" label="Solo travel"/>
    <n-checkbox v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-checkbox v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-checkbox v-model="modelValue" value="volunteering" label="Volunteer Abroad"/>
    <n-checkbox v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>

  <div>
    <n-text font-size="paragraph" weight="medium" v-text="'Model value:'"/>
    {{ modelValue }}
  </div>
</template>
vue
<script setup lang="ts">
import {NCheckbox, NOptionsGroup, NText} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref([])
</script>

Single ​

When using single checkbox, boolean value for v-model can be used.

Do you enjoy travelling
Model value: false
Code
vue
<template>
  <n-options-group label="Do you enjoy travelling">
    <n-checkbox v-model="modelValue" value="solo" label="I enjoy it with every part of my body"/>
  </n-options-group>

  <div>
    <n-text font-size="paragraph" weight="medium" :text="'Model value:'"/>
    {{ modelValue }}
  </div>
</template>
vue
<script setup lang="ts">
import {NCheckbox, NOptionsGroup, NText} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref(false)
</script>

With description ​

Description is a simple way to provide additional information about options.

Select your ideal travelling ideas
Code
vue
<template>
  <n-options-group label="Select your ideal travelling ideas">
    <n-checkbox v-model="modelValue" value="solo" label="Solo travel" description="Traveling solo to remote destinations"/>
    <n-checkbox v-model="modelValue" value="backpacking" label="European Backpacking" description="Backpacking across Europe on a budget"/>
    <n-checkbox v-model="modelValue" value="cruise" label="Caribbean Cruise" description="Going on a luxury cruise to the Caribbean"/>
    <n-checkbox v-model="modelValue" value="volunteering" label="Volunteer Abroad" description="Volunteering in a rural community abroad"/>
    <n-checkbox v-model="modelValue" value="trekking" label="Himalayan Trek" description="Discover the Himalayas: towering peaks, rugged terrain, ancient cultures"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NOptionsGroup, NCheckbox} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref([])
</script>

Disabled options group ​

Using disabled on NOptionsGroup disables all options inside.

Select your ideal travelling ideas
Code
vue
<template>
  <n-options-group label="Select your ideal travelling ideas" disabled>
    <n-checkbox v-model="modelValue" value="solo" label="Solo travel"/>
    <n-checkbox v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-checkbox v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-checkbox v-model="modelValue" value="volunteering" label="Volunteer Abroad"/>
    <n-checkbox v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NCheckbox, NOptionsGroup} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref([])
</script>

Disabled options ​

Using disabled on NCheckbox disables only a concrete option.

Select your ideal travelling ideas
Code
vue
<template>
  <n-options-group label="Select your ideal travelling ideas">
    <n-checkbox v-model="modelValue" value="solo" label="Solo travel" disabled/>
    <n-checkbox v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-checkbox v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-checkbox v-model="modelValue" value="volunteering" label="Volunteer Abroad" disabled/>
    <n-checkbox v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NCheckbox, NOptionsGroup} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref([])
</script>

With validation ​

Select your ideal travelling ideas
You can't travel solo!
Code
vue
<template>
  <n-options-group
    label="Select your ideal travelling ideas"
    :error="validation.error"
    :error-message="validation.errorMessage"
    :success="!validation.error"
  >
    <n-checkbox v-model="modelValue" value="solo" label="Solo travel"/>
    <n-checkbox v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-checkbox v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-checkbox v-model="modelValue" value="volunteering" label="Volunteer Abroad"/>
    <n-checkbox v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NCheckbox, NOptionsGroup} from '@nova-org/components'
import {computed, ref} from 'vue'

const modelValue = ref(['solo'])

const validation = computed(() => ({
  error: modelValue.value.includes('solo'),
  errorMessage: 'You can\'t travel solo!',
}))
</script>

With description and validation ​

Select your ideal travelling ideas
You can't travel solo!
Code
vue
<template>
  <n-options-group
    label="Select your ideal travelling ideas"
    :error="validation.error"
    :error-message="validation.errorMessage"
    :success="!validation.error"
  >
    <n-checkbox v-model="modelValue" value="solo" label="Solo travel" description="Traveling solo to remote destinations"/>
    <n-checkbox v-model="modelValue" value="backpacking" label="European Backpacking" description="Backpacking across Europe on a budget"/>
    <n-checkbox v-model="modelValue" value="cruise" label="Caribbean Cruise" description="Going on a luxury cruise to the Caribbean"/>
    <n-checkbox v-model="modelValue" value="volunteering" label="Volunteer Abroad" description="Volunteering in a rural community abroad"/>
    <n-checkbox v-model="modelValue" value="trekking" label="Himalayan Trek" description="Discover the Himalayas: towering peaks, rugged terrain, ancient cultures"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NCheckbox, NOptionsGroup} from '@nova-org/components'
import {computed, ref} from 'vue'

const modelValue = ref(['solo'])

const validation = computed(() => ({
  error: modelValue.value.includes('solo'),
  errorMessage: 'You can\'t travel solo!',
}))
</script>

With hint ​

Select your ideal travelling ideas
Do not pick solo
Code
vue
<template>
  <n-options-group
    label="Select your ideal travelling ideas"
    :error="validation.error"
    :error-message="validation.errorMessage"
    :success="!validation.error"
    hint="Do not pick solo"
  >
    <n-checkbox v-model="modelValue" value="solo" label="Solo travel"/>
    <n-checkbox v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-checkbox v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-checkbox v-model="modelValue" value="volunteering" label="Volunteer Abroad"/>
    <n-checkbox v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NCheckbox, NOptionsGroup} from '@nova-org/components'
import {computed, ref} from 'vue'

const modelValue = ref(['backpacking'])

const validation = computed(() => ({
  error: modelValue.value.includes('solo'),
  errorMessage: 'You can\'t travel solo!',
}))
</script>

Checkbox API ​

Props ​

PropertyTypeDefault valueDescription

Slots ​

SlotDescription

Options group API ​

Props ​

PropertyTypeDefault valueDescription

Slots ​

SlotDescription