np-radio Radio Group

A wrapper around n-radio-group that adds async option support and supports button-group style.

Basic Usage

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

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

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

const value = ref<string | null>(null)
</script>

Button Group

Set button to use the button-group style.

浏览器不支持，请手动复制 button-group.en.vue

<template>
  <div>
    {{ value }}
  </div>
  <np-radio
    v-model="value"
    button
    :options="[
      { label: 'Shanghai', value: 'shanghai' },
      { label: 'Beijing', value: 'beijing' },
      { label: 'Shenzhen', value: 'shenzhen' },
    ]"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref<string | null>('shanghai')
</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-radio v-model="value" :options="options" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref<string | null>(null)

const options = async () => {
  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-radio v-model="value" :options="options" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value = ref<string | null>(null)

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 label-field and value-field to specify option field names.

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

<template>
  <div>
    {{ value }}
  </div>
  <np-radio
    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<string | null>(null)
</script>

Change Event

Get the value change via the change event.

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

<template>
  <div>
    {{ value }}
  </div>
  <np-radio
    :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<string | number | boolean | null>(null)
</script>

Component Configuration

Props

Prop	Description	Type	Default
v-model	Selected value	RadioGroupValue	-
options	Options	AsyncValue<RadioOption[]>	-
label-field	Custom label field name	string	label
value-field	Custom value field name	string	value
button	Whether to use button-group style	boolean	false
loadingDelay	Loading delay in ms, effective when options is async	number	250
props	NRadioGroup props	NRadioGroup Props	-
onChange	Change event	(value: RadioGroupValue) => void	-

Events

Event	Description	Callback
update:modelValue	Value change event	(value: RadioGroupValue) => void
change	Change event	(value: RadioGroupValue) => void

Types

The component exports the following type definitions:

import type { NpRadioProps } from 'naive-plus'