> ## 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 Input

> InputRadio.vue Component Documentation

The `InputRadio.vue` component is a reusable Vue.js component for creating radio button inputs. It supports two-way binding with `v-model` for managing the selected value, and it allows customization through props like `label`, `name`, `value`, and `disabled`.

***

## Features

<CardGroup cols={2}>
  <Card title="Custom Labels" icon="square-1">
    Provides descriptive labels for the radio options.
  </Card>

  <Card title="Disabled State" icon="square-2">
    Supports disabling individual radio buttons.
  </Card>

  <Card title="Flexible Design" icon="square-3">
    Allows customization of width through the <code>width</code> prop.
  </Card>
</CardGroup>

***

## Usage

### Basic Example

Here is our working Vue model for the examples:

```js theme={null}
import {reactive} from "vue";
import { InputRadio } from '@robojuice/velure-ui';
const radio = reactive({v: 'two'})
```

And the first example:

```vue theme={null}
<InputRadio
  name="radio"
  label="Radio one"
  :model-value="radio.v"
  :value="'one'"
/>
```

### Example with Multiple Options

```vue theme={null}
<template>
  <InputRadio
    disabled="disabled"
    name="radio"
    label="Radio one"
    :model-value="radio.v"
    :value="'one'"
  />
  <InputRadio
    name="radio"
    label="Radio two"
    :model-value="radio.v"
    :value="'two'"
  />
  <InputRadio
    name="radio"
    label="Radio three"
    :model-value="radio.v"
    :value="'three'"
  />
</template>

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

const radio = ref({ v: 'one' });
</script>
```

***

## Props

<ParamField path="v-model" type="string | boolean" default="undefined">
  Binds the selected value of the radio button group.
</ParamField>

<ParamField path="width" type="number | string" default="100">
  Controls the width of the radio button component as a percentage.
</ParamField>

<ParamField path="label" type="string" default="''">
  The label text displayed next to the radio button.
</ParamField>

<ParamField path="value" type="string | number" default="''">
  The value of the radio button.
</ParamField>

<ParamField path="disabled" type="string | boolean" default="false">
  Disables the radio button if set to `true`.
</ParamField>

<ParamField path="name" type="string" default="''">
  The name attribute for grouping radio buttons.
</ParamField>

***

## Example Use Cases

### Form with Radio Group

Use the `InputRadio` component in a form to select one option from a group:

```vue theme={null}
<template>
  <form>
    <InputRadio
      name="gender"
      label="Male"
      :model-value="gender"
      :value="'male'"
    />
    <InputRadio
      name="gender"
      label="Female"
      :model-value="gender"
      :value="'female'"
    />
    <InputRadio
      name="gender"
      label="Other"
      :model-value="gender"
      :value="'other'"
    />
  </form>
</template>

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

const gender = ref('male');
</script>
```

### Disabled Radio Button

Prevent user interaction for specific options:

```vue theme={null}
<InputRadio
  name="status"
  label="Inactive"
  :model-value="status"
  :value="'inactive'"
  disabled="disabled"
/>
```

***

## Notes

* **Two-Way Binding**: The `v-model` prop ensures that the selected value is updated dynamically.
* **Group Behavior**: Use the same `name` for all radio buttons in a group to enforce mutual exclusivity.
* **Customizable Width**: The `width` prop can be adjusted to fit the layout requirements.

For further customization, refer to the component's source code.