np-checkbox Checkbox Group

A wrapper around n-checkbox-group that adds async option support.

Basic Usage

Specify options through options, and bind the value with v-model.

浏览器不支持，请手动复制 basic.en.vue

<template>
  <div>
    {{ value }}
  </div>
  <np-checkbox
    v-model="value"
    :options="['Beijing', 'Shanghai', 'Guangzhou']"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

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

Async Options

The options prop supports an async function, e.g. for fetching dictionaries from a backend API.

浏览器不支持，请手动复制 async.en.vue

<template>
  <div>
    {{ value }}
  </div>
  <np-checkbox v-model="value" :options="options" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref([])

const options = async () => {
  // simulate network request
  await new Promise<any[]>(resolve => setTimeout(resolve, 2000))
  return [
    { label: 'Beijing', value: 'beijing' },
    { label: 'Shanghai', value: 'shanghai' },
    { label: 'Guangzhou', value: 'guangzhou' },
  ]
}
</script>

Async Computed Options

The options prop supports an async computed function, e.g. for fetching different dictionaries from different APIs based on the type.

浏览器不支持，请手动复制 computed.en.vue

<template>
  <div>
    {{ value }}
  </div>
  <div>
    <np-button
      :type="type === 'Fujian' ? 'primary' : undefined"
      @click="() => (type = 'Fujian')"
    >
      Fujian
    </np-button>
    <np-button
      :type="type === 'Guangdong' ? 'primary' : undefined"
      @click="() => (type = 'Guangdong')"
    >
      Guangdong
    </np-button>
  </div>
  <np-checkbox v-model="value" :options="options" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref([])

const type = ref('Fujian')

const options = async () => {
  return type.value === 'Fujian'
    ? await new Promise<any[]>(resolve => {
        setTimeout(
          () => resolve(['Fuzhou', 'Xiamen', 'Longyan', 'Sanming']),
          1500
        )
      })
    : await new Promise<any[]>(resolve => {
        setTimeout(() => resolve(['Guangzhou', 'Shenzhen', 'Zhuhai']), 1500)
      })
}
</script>

Custom Field Names

Usually options are fetched from a backend, and the data structure is not always {label, value}. You can use keys to specify option field names.

浏览器不支持，请手动复制 keys.en.vue

<template>
  <div>
    {{ value }}
  </div>
  <np-checkbox
    v-model="value"
    :options="[
      { name: 'Beijing', id: 'beijing' },
      { name: 'Shanghai', id: 'shanghai' },
      { name: 'Guangzhou', id: 'guangzhou' },
    ]"
    :keys="{ label: 'name', value: 'id' }"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

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

Change Event

Get the value change via the change event.

浏览器不支持，请手动复制 change.en.vue

<template>
  <div>
    {{ value }}
  </div>
  <np-checkbox
    :options="[
      { label: 'Beijing', value: 'beijing' },
      { label: 'Shanghai', value: 'shanghai' },
      { label: 'Guangzhou', value: 'guangzhou' },
    ]"
    @change="(val: any) => (value = val)"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

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

Component Configuration

Props

Prop	Description	Type	Default
v-model	Selected values	CheckboxGroupValue[]	-
options	Options	AsyncValue<CheckboxOption[]>	-
keys	Custom field names	{label: string, value: string}	{ label: 'label', value: 'value' }
loadingDelay	Loading delay in ms, effective when options is async	number	250
props	TCheckboxGroup props	TCheckboxGroup Props	-
onChange	Change event	(value: T, context: CheckboxGroupChangeContext) => void	-

Events

Event	Description	Callback
change	Change event	(value: T, context: CheckboxGroupChangeContext) => void

Types

The component exports the following type definitions:

import type { NpCheckboxProps } from 'naive-plus'