CataUiInputRadio

A customizable radio button component that mimics the functionality of a standard HTML radio input while providing a consistent styling within the Catalyst UI framework.

Basic Usage

<CataUiInputRadio label="My radio button 1" v-model="myModelValue" value="opt1" />
<CataUiInputRadio label="My radio button 2" v-model="myModelValue" value="opt2" />

Tips

The radio button component works exactly like a normal <input type="radio" /> would. Add properties like name & value just like you normally would with standard HTML radio inputs.

Examples

Radio Button Group

Radio buttons with the same v-model will be automatically grouped together, allowing only one option to be selected at a time:

<CataUiInputRadio 
  label="Option 1" 
  name="group-example" 
  v-model="selectedOption" 
  value="option1" />
<CataUiInputRadio 
  label="Option 2" 
  name="group-example" 
  v-model="selectedOption" 
  value="option2" />
<CataUiInputRadio 
  label="Option 3 (Disabled)" 
  name="group-example" 
  v-model="selectedOption" 
  value="option3" 
  disabled 
/>

Props

Prop	Description	Type	Default	Required
label	The text label displayed after the radio button	String	''	false

Inherited Props

The component also supports all standard HTML input attributes for radio inputs:

Prop	Description	Type	Default	Required
checked	Whether the radio button is checked	Boolean	-	false
disabled	Disables the radio button	Boolean	-	false
name	Name for the input element (important for grouping)	String	-	false
required	Makes the input required	Boolean	-	false
value	Value associated with the radio button	String \| Number \| Boolean	-	false

v-model Binding

This component implements Vue's v-model to bind a value:

<script setup>
  import { ref } from 'vue';
  
  const selectedOption = ref('option1');
</script>

<template>
  <CataUiInputRadio
    v-model="selectedOption"
    value="option1"
    label="Option 1" />
</template>