Radio component

The Radio component designed with Vue 3 and Tailwind CSS. possibility to add an Label or customize with a custom Slot.

Basic Usage

Import and use Radio in your Vue components as follows:

<template>
  <Radio
    id="radio1"
    v-model="radio"
    label="Radio item"
    name="Custom Radio"
    value="Value 1"
  />
</template>

<script setup>
import { Radio } from '@robuust-digital/vue-components/core';
</script>

Radio item

Props

Below are the props supported by Radio, which allow you to customize its appearance and behavior:

Prop	Type	Default	Description
modelValue	RadioModelValue	null	The v-model binding value. Can be boolean, string, number, object, array, or null.
label	String	''	The label text displayed next to the radio button.
rootClass	String	''	Additional CSS classes to apply to the root label element.

Note: Standard HTML input attributes (like id, name, value, disabled, etc.) are passed through via v-bind="$attrs". The id attribute is typically required for proper accessibility.

Slots

Below is example to edit the custom slot of Radio:

Radio with a custom slot

Radio item with a custom slot

This is a description for the radio item.

Show code

<template>
  <Radio
    id="radio3"
    v-model="radio"
    value="Value 3"
    name="Custom Radio"
  >
    <div>
      <span class="block">Radio item with a <strong class="text-red-500">custom</strong> slot</span>
      <p class="text-slate-600">
        This is a description for the radio item.
      </p>
    </div>
  </Radio>
</template>

Examples

Default radio

Radio item

Show code

<template>
  <Radio
    id="radio1"
    v-model="radio"
    label="Radio item"
    name="Custom Radio"
    value="Value 1"
  />
</template>

Refs

The Radio component's native HTML <input type="radio"> element can be accessed using a template ref combined with a ref. This allows you to call native radio methods or set properties directly:

<template>
  <Radio ref="radioRef" />
</template>

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

const radioRef = ref();

onMounted(() => {
  // Access the native radio element
  const nativeRadio = radioRef.value.$refs.input;
  
  // Use native radio properties and methods
  nativeRadio.focus(); // Focus the radio button
});
</script>

CSS Customization ⚡️

To customize the radio styles global

:root {
  /* Available variables */
  --rvc-radio-input-box-shadow: var(--rvc-base-box-shadow);
  --rvc-radio-input-border-color: var(--rvc-base-border-color);
  --rvc-radio-gap: calc(var(--spacing) * 2);
  --rvc-radio-font-size: var(--text-base);
  --rvc-radio-font-weight: var(--font-weight-medium);
  --rvc-radio-color: var(--color-slate-950);
  --rvc-radio-input-bg-color: var(--rvc-base-input-bg-color);
  --rvc-radio-input-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
  --rvc-radio-input-disabled-opacity: var(--rvc-base-input-disabled-opacity);
  --rvc-radio-input-size: calc(var(--spacing) * 4);
  --rvc-radio-input-border-radius: calc(infinity * 1px);
  --rvc-radio-input-border-width: 1px;
  --rvc-radio-input-checked-bg-color: var(--color-indigo-600);
  --rvc-radio-input-checked-border-color: var(--color-indigo-600);
  --rvc-radio-input-checked-icon-color: var(--color-white);
}