RadioButton

Custom radio button component. Use a shared v-model and unique value props to group radios — only one can be selected at a time.

Live Demo

Monthly

Yearly

Lifetime

Selected plan: monthly

Hide Label

The label is visually hidden but still announced by screen readers.

Small

Medium

Large

Selected size: md

Usage

<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>

Props

Prop	Type	Default	Description
modelValue	unknown	-	Shared group value (v-model); radio is checked when it matches value
value	unknown	-	The value this radio represents
name	string	-	HTML name attribute — groups radios for keyboard nav and form submission
text	string	-	Inline label text (alternative to default slot)
hideLabel	boolean	false	Visually hides the label while keeping it accessible to screen readers

Events

Event	Payload	Description
update:modelValue	unknown	Emitted when the radio is selected

Slots

Slot	Props	Description
default	-	Label text / content (overrides text prop)