nb-radio

This is a radio button group component for Vue.js 3+.

Loading component...

Installation

Yarn
yarn add @vlalg-nimbus/nb-inputs
NPM
npm install @vlalg-nimbus/nb-inputs

Usage

Vue 3
import { createApp } from 'vue'
import App from './App.vue'

import NbInputComponents from '@vlalg-nimbus/nb-inputs'
import "@vlalg-nimbus/nb-inputs/dist/style.css";

const app = createApp(App)
app.use(NbInputComponents)
app.mount('#app')
Nuxt 3
import NbInputComponents from '@vlalg-nimbus/nb-inputs'
import "@vlalg-nimbus/nb-inputs/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbInputComponents)
})

To use, simply call the component, in this case it will be NbRadio or nb-radio.

Mode 1
<template>
  <NbRadio />
</template>
Mode 2
<template>
  <nb-radio />
</template>
Mode 3
<template>
  <nb-radio></nb-radio>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
displayString'b'Defines the display type. Accepts ib and b.
tabIndexNumber, Array0Defines the tab index. Can be a number (applied to all items) or an array (one value per item). Set this property to make the radio buttons focusable by the keyboard.
hasTabIndexEnterBooleantrueEnables the radio buttons to be activated with the Enter key when focused.
hasTabIndexSpaceBooleantrueEnables the radio buttons to be activated with the Space key when focused.
ariaLabelString'Alternate Text Button'Defines the aria-label attribute for screen readers.
ariaAttrsObject{}Allows passing custom aria attributes as an object. Keys will automatically receive the aria- prefix. Example: { 'describedby': 'help-id', 'required': 'true' }
disabledBooleanfalseDefines if the radio is disabled
groupNameString''Defines radio group name
optionsArrayDefines the list of values. It is an array of objects { value: 'Value', text: 'Text' }
currentOptionString''Defines the selected value. The value must exist in the list options, in the key field
valueTypeString'boolean'Defines values type. Accepts boolean, string and number
themeString'light'Defines the theme. Accepts dark and light. When theme is set, uses theme-specific color props.
hoverEffectBooleanfalseDefines whether the hover effect exists when passing over the radio without it being selected.
activeHoverEffectBooleanfalseDefines whether the hover effect exists when passing over the radio while it is selected.
itemGapNumber15Defines the space between radio options.
internalGapNumber6Defines the space between the radio and the text.
scaleNumber1Defines component scale (size).
fontFamilyString"'Lato', sans-serif"Defines the font-family
fontSizeString'1.6em'Defines the font-size
fontWeightNumber400Defines the font-weight
lightTextColorString'#333333'Defines the text color for light theme. Accepts Color name and Hex
lightColorString'#cccccc'Defines the radio color for light theme. Accepts Hex color only
lightColorHoverString'#bbbbbb'Defines the radio hover color for light theme. Accepts Hex color only
darkTextColorString'#e0e0e0'Defines the text color for dark theme. Accepts Color name and Hex
darkColorString'#555555'Defines the radio color for dark theme. Accepts Hex color only
darkColorHoverString'#666666'Defines the radio hover color for dark theme. Accepts Hex color only

Events

nameReturn typeDescription
current-valuevalueFired when an update to the selected value is made, returns selected value.
changedvalueFired when an update to the selected value is made, returns selected value.
clickednothingFired when a radio button is clicked, returns nothing.

Example

Light Theme (default)

<template>
  <NbRadio
    nb-id="radio-light"
    display="b"
    group-name="radio-group-light"
    theme="light"
    :options="radioOptions"
    :current-option="currentRadioValue"
    light-text-color="#1e40af"
    light-color="#3b82f6"
    light-color-hover="#60a5fa"
    :hover-effect="true"
    :active-hover-effect="true"
    value-type="string"
    @current-value="handleRadioChange($event)"
    @changed="handleRadioChange($event)"
    @clicked="logEvent()"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompRadio',
});

const radioOptions = [
  { value: 'option1', text: 'Option 1' },
  { value: 'option2', text: 'Option 2' },
  { value: 'option3', text: 'Option 3' }
];

const currentRadioValue = ref('option1');

const handleRadioChange = (value) => {
  currentRadioValue.value = value;
  console.log('Radio changed:', value);
};

const logEvent = () => {
  console.log('clicked');
};
</script>

Dark Theme

<template>
  <NbRadio
    nb-id="radio-dark"
    display="b"
    group-name="radio-group-dark"
    theme="dark"
    :options="radioOptions"
    :current-option="currentRadioValue"
    dark-text-color="#a78bfa"
    dark-color="#8b5cf6"
    dark-color-hover="#7c3aed"
    :hover-effect="true"
    :active-hover-effect="true"
    value-type="string"
    @current-value="handleRadioChange($event)"
    @changed="handleRadioChange($event)"
    @clicked="logEvent()"
  />
</template>

<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'CompRadioDark',
});

const radioOptions = [
  { value: 'option1', text: 'Option 1' },
  { value: 'option2', text: 'Option 2' },
  { value: 'option3', text: 'Option 3' }
];

const currentRadioValue = ref('option2');

const handleRadioChange = (value) => {
  currentRadioValue.value = value;
  console.log('Radio changed:', value);
};

const logEvent = () => {
  console.log('clicked');
};
</script>
Table of Contents