Radio Buttons

<script lang="ts" setup>
import { ref } from "vue";
import { NNRadioButtons } from "@fronntui/vue";

const options = ref([
  {
    value: "1",
    label: "Option 1",
    disabled: false,
  },
  {
    value: "2",
    label: "Option 2",
    disabled: false,
  },
  {
    value: "3",
    label: "Option 3",
    disabled: true,
  },
  {
    value: "4",
    label: "Option 4",
    disabled: false,
  },
]);

const model = ref("2");
</script>

<template>
  <NNRadioButtons :options="options" v-model="model" />
</template>

Props

Name

Type

modelValue

name

string | null

options

Array<{ value: string; label: string; disabled?: boolean }>

Events

Name

Payload

update:modelValue

string

Fired after the selection has been changed

Slots

<NNRadioButtons :options="options" v-model="model">
  <template #label="{ option }">
    {{ option.label }}
    <span class="custom">({{ option.value }})</span>
  </template>
</NNRadioButtons>

Name

Payload

label

{ option: { label: string, value: string, disabled: boolean } }

Use this slot to overwrite the default rendering of an option label

Paging Select