Skip to main content
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

Custom Labels

Provides descriptive labels for the radio options.

Disabled State

Supports disabling individual radio buttons.

Flexible Design

Allows customization of width through the width prop.

​
Usage

​
Basic Example

Here is our working Vue model for the examples: 
import {reactive} from "vue";
import { InputRadio } from '@robojuice/velure-ui';
const radio = reactive({v: 'two'})
And the first example: 
<InputRadio
  name="radio"
  label="Radio one"
  :model-value="radio.v"
  :value="'one'"
/>

​
Example with Multiple Options

<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

​
v-model
string | boolean
default:"undefined"
Binds the selected value of the radio button group.
​
width
number | string
default:"100"
Controls the width of the radio button component as a percentage.
​
label
string
default:"''"
The label text displayed next to the radio button.
​
value
string | number
default:"''"
The value of the radio button.
​
disabled
string | boolean
default:"false"
Disables the radio button if set to true.
​
name
string
default:"''"
The name attribute for grouping radio buttons.

​
Example Use Cases

​
Form with Radio Group

Use the InputRadio component in a form to select one option from a group: 
<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: 
<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.