Vue Radio Button: Responsive Custom Radio Button

Overview

The Vue Radio Button is a custom radio-type HTML5 input component for selecting one option from a list of predefined choices. It supports different states, sizes, labels, label positions, and UI customizations.

Radio Button group

The Vue Radio Button is used to select a single option from the logically grouped options set.

Forms support

Seamlessly supports HTML forms, template-driven forms (Angular), and reactive forms.

Built-in themes

The Vue Radio button component supports built-in themes such as Bootstrap 5, Tailwind CSS, Fluent, high contrast, and more. Users can customize these built-in themes or create new themes to achieve the desired look and feel either by simply overriding SASS variables or using the Theme Studio application.

• Theme Studio Application

Vue Radio Button Code Example

Easily get started with the Vue Radio Button using a few simple lines of Vue codes as demonstrated below. Also explore our Vue Radio Button Example that shows you how to render and configure a Radio Button in Vue.

<template>
<ul>
<li><ejs-radiobutton label='Option 1' name='default'></ejs-radiobutton></li>
<li><ejs-radiobutton label='Option 2' name='default' checked=true></ejs-radiobutton></li>
</ul>
</template>

<script>
import Vue from 'vue';
import { RadioButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(RadioButtonPlugin);

export default {}
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";

.e-radio-wrapper {
  margin-top: 18px;
}

li {
  list-style: none;
}
</style>

Other supported frameworks

The Radio button component is also available in Blazor, React, Angular, and JavaScript frameworks. Check out the different Radio button platforms from the links below,

• Blazor Radio Button

• React Radio Button

• Angular Radio Button

• JavaScript Radio Button

Web Accessibility

• Fully supports WAI-ARIA accessibility to work with screen readers and assistive devices.
• Follows WAI-ARIA best practices for implementing keyboard interaction.
• Based on WCAG 2.0 standards, the UI element visuals such as foreground color, background color, line spacing, text, and images are designed.
• Supports right-to-left (RTL) text direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.