Radio

NbRadio renders a group of radio button inputs for single-choice selection. Radio buttons in the same group share a name attribute, ensuring only one can be active at a time.

<template>
  <NbRadio
    v-model="size"
    name="size"
    label="Choose your size"
    :options="[
      { label: 'Small', value: 'sm' },
      { label: 'Medium', value: 'md' },
      { label: 'Large', value: 'lg' },
    ]"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref('')
</script>

Without group label ​

The label prop is optional. Omit it when the context makes the purpose clear.

Multiple groups ​

Each group must have a unique name to function independently.

<template>
  <NbRadio
    v-model="plan"
    name="plan"
    label="Billing plan"
    :options="planOptions"
  />
  <NbRadio
    v-model="cycle"
    name="cycle"
    label="Billing cycle"
    :options="cycleOptions"
  />
</template>

Props ​

Option interface ​

interface Option {
  label: string // Display text
  value: string // Option value
}

Events ​

Accessibility ​

• Radio buttons are grouped by a shared name attribute.
• Keyboard navigation: Arrow keys to move between options, Space to select.
• Provide a label whenever the group purpose isn't obvious from surrounding context.