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 labelField and valueField 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' },
    ]"
    value-field="id"
    label-field="name"
  />
</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[]>	-
labelField	Custom label field name	string	label
valueField	Custom value field name	string	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'