Radio Input

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

string | boolean

default:"undefined"

Binds the selected value of the radio button group.

number | string

default:"100"

Controls the width of the radio button component as a percentage.

string

default:"''"

The label text displayed next to the radio button.

string | number

default:"''"

The value of the radio button.

string | boolean

default:"false"

Disables the radio button if set to true.

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.

Setup

Foundations

Inputs

Features

Custom Labels

Disabled State

Flexible Design

Usage

Basic Example

Example with Multiple Options

Props

Example Use Cases

Form with Radio Group

Disabled Radio Button

Notes

​Features

Custom Labels

Disabled State

Flexible Design

​Usage

​Basic Example

​Example with Multiple Options

​Props

​Example Use Cases

​Form with Radio Group

​Disabled Radio Button

​Notes

Features

Usage

Basic Example

Example with Multiple Options

Props

Example Use Cases

Form with Radio Group

Disabled Radio Button

Notes