Radio

Last updated

2026-10-04 UTC

Demo

radio/demo.vue

Current: iris

<script setup lang="ts">
import { ref } from 'vue'

const picked = ref('iris')
const options = [
  { label: 'Sky blue', value: 'sky' },
  { label: 'Iris purple', value: 'iris' },
  { label: 'Orchid pink', value: 'pink' },
  { label: 'Disabled option', value: 'disabled', disabled: true },
]
</script>

<template>
  <div class="flex flex-col gap-4">
    <YlfRadioGroup v-model="picked" :options="options" orientation="horizontal" aria-label="Theme color" />
    <p class="text-sm op-70">
      Current: {{ picked }}
    </p>
  </div>
</template>

Radio groups use Reka UI for radiogroup semantics and arrow key roving focus; appearance reads shared tokens.

Props

Prop	Description	Type	Default
v-model	Selected value	string	—
options	Options	RadioOption[]	—
orientation	Orientation	vertical | horizontal	vertical
disabled	Disable the group	boolean	false

RadioOption

Field	Description	Type
label	Label	string
value	Value	string
disabled	Disable this item	boolean?

Readonly options are supported. Name the group with aria-label or aria-labelledby; options use their labels. Arrows skip disabled items. Name/required forward to Reka for native forms.