Radio Group ​

<script setup lang="ts">
import { ref } from 'vue';
import { RadioGroup } from '@youcan/ui-vue3';
import type { RadioData } from '@youcan/ui-vue3/dist/types/components/Radio/types';

const languages = ref<RadioData[]>([
  {
    label: 'JavaScript',
    value: 'js',
  },
  {
    label: 'PHP',
    value: 'php',
  },
  {
    label: 'Python',
    value: 'python',
  },
]);

const preferredLanguage = ref<RadioData>(languages.value[0].value);
</script>

<template>
  <RadioGroup
    v-model="preferredLanguage"
    name="languages"
    :items="languages"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RadioList } from '@youcan/ui-vue3';
import type { RadioListOption } from '@youcan/ui-vue3/dist/types/components/RadioList/types';

const options = ref<RadioListOption[]>([
  {
    label: 'Pizza',
    suffix: '🍕',
  },
  {
    label: 'Burger',
    suffix: '🍔',
  },
  {
    label: 'Burrito',
    suffix: '🌯',
  },
]);
const selectedOption = ref<RadioListOption>(options.value[0].label);
</script>

<template>
  <RadioList
    v-model="selectedOption"
    :options="options"
  />
</template>