RadioGroup

Basic usage

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniRadioGroup } from "unify-ui";

const options = [
  { label: "one", value: "1" },
  { label: "two", value: "2" },
  { label: "three", value: "3" },
  { label: "four", value: "4" },
];

const value = ref("1");

function handleChange(value: string) {
  console.log("value", value);
}
</script>

<template>
  <UniRadioGroup v-model="value" name="basic-usage" :options="options" @change="handleChange"></UniRadioGroup>
</template>

Inline layout

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniRadioGroup } from "unify-ui";

const options = [
  { label: "one", value: "1" },
  { label: "two", value: "2" },
  { label: "three", value: "3" },
  { label: "four", value: "4" },
];

const value = ref("1");

function handleChange(value: string) {
  console.log("value", value);
}
</script>

<template>
  <UniRadioGroup v-model="value" name="inline-case" :options="options" inline @change="handleChange"></UniRadioGroup>
</template>

Disabled

View source

<script setup lang="ts">
import { ref } from "vue";
import { UniRadioGroup } from "unify-ui";

const options = [
  { label: "one", value: "1" },
  { label: "two", value: "2" },
  { label: "three", value: "3" },
  { label: "four", value: "4" },
];

const value = ref("1");
</script>

<template>
  <UniRadioGroup v-model="value" name="disabled-case" :options="options" disabled></UniRadioGroup>
</template>

API

Properties

generic = "T extends string | number | symbol";

defineProps<{
  modelValue?: T;
  options: { label: string; value: T }[];
  name: string;
  inline?: boolean;
  disabled?: boolean;
}>();

Events

function handleChange(value: T) {
  emits("update:modelValue", value);
  /** Triggered after a value is selected */
  emits("change", value);
}