RadioButton

Власний компонент радіокнопки. Щоб згрупувати радіокнопки, використовуйте спільну v-model і унікальні пропси value — вибрати можна лише одну.

Живе демо

Щомісяця

Щороку

Довічно

Вибраний план: monthly

Прихований підпис

Підпис візуально приховано, але скрінрідери його все одно озвучують.

Малий

Середній

Великий

Вибраний розмір: md

Використання

<template>
  <orio-radio-button v-model="plan" name="plan" value="monthly">Monthly</orio-radio-button>
  <orio-radio-button v-model="plan" name="plan" value="yearly">Yearly</orio-radio-button>
  <orio-radio-button v-model="plan" name="plan" value="lifetime">Lifetime</orio-radio-button>
</template>

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

const plan = ref('monthly')
</script>

Пропси

Проп	Тип	За замовчуванням	Опис
modelValue	unknown	-	Спільне значення групи (v-model); радіокнопка позначена, коли воно збігається з value
value	unknown	-	Значення, яке представляє ця радіокнопка
name	string	-	HTML-атрибут name — групує радіокнопки для навігації з клавіатури та надсилання форми
text	string	-	Текст підпису (альтернатива слоту за замовчуванням)
hideLabel	boolean	false	Візуально приховує підпис, залишаючи його доступним для скрінрідерів

Події

Подія	Дані	Опис
update:modelValue	unknown	Генерується, коли радіокнопку вибрано

Слоти

Слот	Пропси	Опис
default	-	Текст / вміст підпису (перекриває проп text)