> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio Panels Input

> InputRadioPanels.vue Component Documentation

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

<CardGroup cols={2}>
  <Card title="Descriptive Options" icon="square-1">
    Displays a name and description for each option in the list.
  </Card>

  <Card title="Interactive Panels" icon="square-2">
    Offers a visually engaging interface with selectable panels.
  </Card>

  <Card title="Customizable Options" icon="square-3">
    Allows passing a dynamic array of options with keys, names, and descriptions.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { InputRadioPanels } from '@robojuice/velure-ui';
```

```vue theme={null}
<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

```vue theme={null}
<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

<ParamField path="v-model" type="number" default="null">
  Binds the currently selected option's `key` value.
</ParamField>

<ParamField path="options" type="array" default="[]">
  Array of option objects. Each object must include `key`, `name`, and `description` fields.
</ParamField>

***

## Example Use Cases

### User Role Selection

Use the `InputRadioPanels` component to allow users to select a role:

```vue theme={null}
<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.