CataUiInputGroup

A component that manages a group of related input elements (checkboxes or radio buttons) with shared properties such as labels, error handling, and tooltips.

<CataUiInputGroup 
  :disabled="false"
  :error="errorMessage" 
  label="Select your preferences" 
  :options="options" 
  :required="true"
  tooltip="Choose one or more options"
  type="checkbox" 
  v-model="selectedValues" />

<CataUiInputGroup 
  :disabled="false"
  :error="errorMessage" 
  label="Select your option" 
  :options="radioOptions" 
  :required="true"
  tooltip="Choose only one option"
  type="radio" 
  v-model="selectedValue" />

Props

Prop	Description	Type	Default	Required	Options
disabled	Disables all inputs in the group	Boolean	false	false
error	Displays the string as an error message below the group	String	''	false
label	The headline text displayed above the group of inputs	String	''	false
options	Array of options to be displayed in the group (see structure below)	Array		true
required	Displays a required indicator (*) next to the label	Boolean	false	false
tooltip	Text displayed in a tooltip next to the group label	String	''	false
type	Type of input elements to be used in the group	String	'checkbox'	false	'checkbox', 'radio'

Model Value

The component uses Vue 3's defineModel to support v-model binding:

When type="checkbox": The model value should be an array that stores the selected values.
When type="radio": The model value should be a string, number, or boolean matching the selected option's value.

Options Structure

The options prop requires an array of objects with the following structure:

const options = [
    {
        value: 'opt1',  // String, Number, or Boolean - the value to be stored in v-model when selected
        label: 'Option 1'  // String - the text label displayed next to the input
    },
    {
        value: 'opt2',
        label: 'Option 2'
    },
    {
        value: 'opt3',
        label: 'Option 3'
    }
]

Examples

Radio Group Example

<template>
  <CataUiInputGroup
    label="Select your favorite fruit"
    type="radio"
    :options="fruitOptions"
    v-model="selectedFruit"
    :required="true"
    :error="fruitError"
    tooltip="Choose only one option" />
</template>

<script setup>
import { ref } from 'vue';

const selectedFruit = ref('');
const fruitError = ref('');

const fruitOptions = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'orange', label: 'Orange' }
];

const validateSelection = () => {
  if (!selectedFruit.value) {
    fruitError.value = 'Please select a fruit';
  } else {
    fruitError.value = '';
  }
};
</script>

Checkbox Group Example

<template>
  <CataUiInputGroup
    label="Select your hobbies"
    type="checkbox"
    :options="hobbyOptions"
    v-model="selectedHobbies"
    tooltip="Select all that apply" />
</template>

<script setup>
import { ref } from 'vue';

const selectedHobbies = ref([]);
const hobbyOptions = [
  { value: 'reading', label: 'Reading' },
  { value: 'sports', label: 'Sports' },
  { value: 'music', label: 'Music' },
  { value: 'cooking', label: 'Cooking' }
];
</script>