Skip to main content
The InputRadioPanels.vue component is a reusable Vue.js component for selecting an option from a list presented as interactive panels. It supports two-way binding with v-model for managing the selected value and provides a detailed description and visual feedback for each option.

​
Features

Descriptive Options

Displays a name and description for each option in the list.

Interactive Panels

Offers a visually engaging interface with selectable panels.

Customizable Options

Allows passing a dynamic array of options with keys, names, and descriptions.

​
Usage

​
Basic Example

import { InputRadioPanels } from '@robojuice/velure-ui';

<InputRadioPanels
  v-model="radioPanels.id"
  :options="[
    {key: 3, name: 'Kevin', description: 'Kevin is a good guy'},
    {key: 7, name: 'Mike', description: 'Mike is a good guy'},
    {key: 9, name: 'Jake', description: 'Jake is a good guy'},
  ]"
/>

​
Dynamic Options

<template>
  <InputRadioPanels v-model="selectedOption" :options="userOptions" />
</template>

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

const selectedOption = ref(null);
const userOptions = [
  { key: 1, name: 'Admin', description: 'Administrator with full access' },
  { key: 2, name: 'Editor', description: 'Editor with limited access' },
  { key: 3, name: 'Viewer', description: 'Viewer with read-only access' }
];
</script>

​
Props

​
v-model
number
default:"null"
Binds the currently selected option’s key value.
​
options
array
default:"[]"
Array of option objects. Each object must include key, name, and description fields.

​
Example Use Cases

​
User Role Selection

Use the InputRadioPanels component to allow users to select a role: 
<template>
  <InputRadioPanels
    v-model="userRole"
    :options="[
      { key: 1, name: 'Admin', description: 'Administrator privileges' },
      { key: 2, name: 'User', description: 'Standard user privileges' }
    ]"
  />
</template>

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

const userRole = ref(1);
</script>

​
Notes

  • Validation: The options prop is validated to ensure that each option includes key, name, and description fields.
  • Two-Way Binding: The v-model prop ensures that the selected option is updated dynamically.
  • Interactive Design: The currently selected panel is visually distinct, providing immediate feedback to the user.
For further customization, refer to the component’s source code.