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
name	String	Custom radio	The name attribute for a radio field is used to identify the radio within a form.
id	String	Required	The id attribute for a radio is used to uniquely identify the radio element.
label	String	``	The label prop provides the text for the label.
value	String	``	The value prop provides the value of the radio.

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"
  >
    <label for="radio3"> Radio item with a <strong class="text-red-500">custom</strong> slot</label>
    <p class="text-slate-600">
      This is a description for the radio item.
    </p>
  </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.$el;
  
  // 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);
}