OcRadio component
Description
The OcRadio component represents a simple radio input element that can either be checked or unchecked.
Accessibility
The label is required and represents the name of the input. If label-hidden is set to true, the label will be hidden from the screen but still be available for screen readers via the aria-label attribute.
Examples
Default
The default use case needs a label and a v-model to bind the value of the radio element.
vue
<template>
<oc-radio v-model="inputValue" :option="true" label="Some radio" />
<p>Checked: {{ inputValue || false }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const inputValue = ref(null)
</script>Group
Multiple radio elements can be grouped to allow choosing one option.
vue
<template>
<oc-radio
v-for="o in availableOptions"
:key="o"
v-model="inputValue"
:option="o"
:label="o"
class="block"
/>
<p>Selection: {{ inputValue || 'None' }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const availableOptions = ['Folder', 'Space', 'File']
const inputValue = ref(null)
</script>