JavaScript Radio Button - A Customizable HTML5 Radio Button

Overview

The JavaScript Radio Button is a custom radio-type HTML5 input control 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 JavaScript Radio Button is used to select a single option from the logically grouped options set.

Forms support

The JavaScript Radio Button seamlessly supports HTML forms, template-driven forms (Angular), and reactive forms.

Built-in themes

The HTML5/JavaScript Radio button 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

Other supported frameworks

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

• Blazor Radio Button

• React Radio Button

• Angular Radio Button

• Vue 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.

JavaScript Radio Button Code Example

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

<div class="control-section">
    <div class="content-wrapper">
        <h4 class="row">Select a payment method</h4>
        <div class="row">
            <input id="radio1" type="radio">
        </div>
        <div class="row">
            <input id="radio2" type="radio">
        </div>
        <div class="row">
            <input id="radio3" type="radio">
        </div>
        <div class="row">
            <input id="radio4" type="radio">
        </div>  
  </div>
</div>

import { loadCultureFiles } from '../common/culture-loader';
import { RadioButton } from '@syncfusion/ej2-buttons';

/**
 * Default RadioButton sample
 */

    loadCultureFiles();
    //Checked State
    let radioButton: RadioButton = new RadioButton({label: 'Credit/Debit Card', name: 'payment', value: 'credit/debit', checked: true});
    radioButton.appendTo('#radio1');

    radioButton = new RadioButton({label: 'Net Banking', name: 'payment', value: 'netbanking'});
    radioButton.appendTo('#radio2');

    radioButton = new RadioButton({label: 'Cash on Delivery', name: 'payment', value: 'cashondelivery'});
    radioButton.appendTo('#radio3');

    radioButton = new RadioButton({label: 'Other Wallets', name: 'payment', value: 'others'});
    radioButton.appendTo('#radio4');