Nova

Appearance

Radio ​

Radio Groups let users choose one option from a selection of mutually exclusive items.

Import ​

Importing NOptionsGroup is not mandatory, but it provides a simple way of displaying label, errors, success state and others.

ts
import {NRadio, NOptionsGroup} from '@nova-org/components'

Usage ​

Select your ideal travelling idea
Code
vue
<template>
  <n-options-group label="Select your ideal travelling idea">
    <n-radio v-model="modelValue" value="solo" label="Solo travel"/>
    <n-radio v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-radio v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-radio v-model="modelValue" value="volunteering" label="Volunteer Abroad"/>
    <n-radio v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NRadio, NOptionsGroup} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref(null)
</script>

With description ​

Description is a simple way to provide additional information about options.

Select your ideal travelling idea
Code
vue
<template>
  <n-options-group label="Select your ideal travelling idea">
    <n-radio v-model="modelValue" value="solo" label="Solo travel" description="Traveling solo to remote destinations"/>
    <n-radio v-model="modelValue" value="backpacking" label="European Backpacking" description="Backpacking across Europe on a budget"/>
    <n-radio v-model="modelValue" value="cruise" label="Caribbean Cruise" description="Going on a luxury cruise to the Caribbean"/>
    <n-radio v-model="modelValue" value="volunteering" label="Volunteer Abroad" description="Volunteering in a rural community abroad"/>
    <n-radio v-model="modelValue" value="trekking" label="Himalayan Trek" description="Discover the Himalayas: towering peaks, rugged terrain, ancient cultures"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NRadio, NOptionsGroup} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref(null)
</script>

Disabled options group ​

Using disabled on NOptionsGroup disables all options inside.

Select your ideal travelling idea
Code
vue
<template>
  <n-options-group label="Select your ideal travelling idea" disabled>
    <n-radio v-model="modelValue" value="solo" label="Solo travel"/>
    <n-radio v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-radio v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-radio v-model="modelValue" value="volunteering" label="Volunteer Abroad"/>
    <n-radio v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NRadio, NOptionsGroup} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref(null)
</script>

Disabled options ​

Using disabled on NRadio disables only a concrete option.

Select your ideal travelling idea
Code
vue
<template>
  <n-options-group label="Select your ideal travelling idea">
    <n-radio v-model="modelValue" value="solo" label="Solo travel" disabled/>
    <n-radio v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-radio v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-radio v-model="modelValue" value="volunteering" label="Volunteer Abroad" disabled/>
    <n-radio v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NRadio, NOptionsGroup} from '@nova-org/components'
import {ref} from 'vue'

const modelValue = ref(null)
</script>

With validation ​

Select your ideal travelling idea
You can't travel solo!
Code
vue
<template>
  <n-options-group
    label="Select your ideal travelling idea"
    :error="validation.error"
    :error-message="validation.errorMessage"
    :success="!validation.error"
  >
    <n-radio v-model="modelValue" value="solo" label="Solo travel"/>
    <n-radio v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-radio v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-radio v-model="modelValue" value="volunteering" label="Volunteer Abroad"/>
    <n-radio v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NRadio, NOptionsGroup} from '@nova-org/components'
import {computed, ref} from 'vue'

const modelValue = ref('solo')

const validation = computed(() => ({
  error: modelValue.value === 'solo',
  errorMessage: 'You can\'t travel solo!',
}))
</script>

With description and validation ​

Select your ideal travelling idea
You can't travel solo!
Code
vue
<template>
  <n-options-group
    label="Select your ideal travelling idea"
    :error="validation.error"
    :error-message="validation.errorMessage"
    :success="!validation.error"
  >
    <n-radio v-model="modelValue" value="solo" label="Solo travel" description="Traveling solo to remote destinations"/>
    <n-radio v-model="modelValue" value="backpacking" label="European Backpacking" description="Backpacking across Europe on a budget"/>
    <n-radio v-model="modelValue" value="cruise" label="Caribbean Cruise" description="Going on a luxury cruise to the Caribbean"/>
    <n-radio v-model="modelValue" value="volunteering" label="Volunteer Abroad" description="Volunteering in a rural community abroad"/>
    <n-radio v-model="modelValue" value="trekking" label="Himalayan Trek" description="Discover the Himalayas: towering peaks, rugged terrain, ancient cultures"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NRadio, NOptionsGroup} from '@nova-org/components'
import {computed, ref} from 'vue'

const modelValue = ref('solo')

const validation = computed(() => ({
  error: modelValue.value === 'solo',
  errorMessage: 'You can\'t travel solo!',
}))
</script>

With hint ​

Select your ideal travelling idea
Do not pick solo
Code
vue
<template>
  <n-options-group
    label="Select your ideal travelling idea"
    :error="validation.error"
    :error-message="validation.errorMessage"
    :success="!validation.error"
    hint="Do not pick solo"
  >
    <n-radio v-model="modelValue" value="solo" label="Solo travel"/>
    <n-radio v-model="modelValue" value="backpacking" label="European Backpacking"/>
    <n-radio v-model="modelValue" value="cruise" label="Caribbean Cruise"/>
    <n-radio v-model="modelValue" value="volunteering" label="Volunteer Abroad"/>
    <n-radio v-model="modelValue" value="trekking" label="Himalayan Trek"/>
  </n-options-group>
</template>
vue
<script setup lang="ts">
import {NRadio, NOptionsGroup} from '@nova-org/components'
import {computed, ref} from 'vue'

const modelValue = ref('backpacking')

const validation = computed(() => ({
  error: modelValue.value === 'solo',
  errorMessage: 'You can\'t travel solo!',
}))
</script>

Radio API ​

Props ​

PropertyTypeDefault valueDescription

Slots ​

SlotDescription

Options group API ​

Props ​

PropertyTypeDefault valueDescription

Slots ​

SlotDescription