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.

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

<template>
  <oc-radio
    v-for="o in availableOptions"
    :key="o"
    v-model="inputValue"
    :option="o"
    :label="o"
    class="oc-display-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>

Properties

Emits

Slots