Radio Button

On this page we will go through our Radio Button component

Radio Button allow the user to select one option from a set of items. They can be used in forms, filters, lists etc.

Table of contents

Overview

Each radio button component is based on a global CSS class called “msds-radio-button”. It is important to include it first as it is the main CSS class. Without it, the UI of the component won’t work.

The radio button makes use of custom styling by replacing the default input element with a pseudo-element selector, yet it keeps the native “checked” boolean property to toggle its state on/off (or selected/unselected).

<div class="col-6">
    <div class="msds-radio-button">
        <input class="msds-radio-button__input" id="defaul-radio-button" type="radio" name="radio-button-group">
        <label class="msds-radio-button__label msds-text-body-1 msds-text-gray-10" for="defaul-radio-button">
            Default one
        </label>
    </div>
    <div class="msds-radio-button">
        <input class="msds-radio-button__input" id="defaul-radio-button-two" type="radio" name="radio-button-group">
        <label class="msds-radio-button__label msds-text-body-1 msds-text-gray-10" for="defaul-radio-button-two">
            Default two
        </label>
    </div>
</div>

States

The styling of states are defined in the CSS file. Some of the states can be triggered programmatically by setting the relative property to the input element.

Hover State

State of the hovered radio button.

Checked State

It can be checked programmatically by setting the “checked” property to the input element.

<div class="col-6">
    <div class="msds-radio-button">
        <input class="msds-radio-button__input" id="checked-radio-button" type="radio" checked>
        <label class="msds-radio-button__label msds-text-body-1 msds-text-gray-10" for="checked-radio-button">
            Selected
        </label>
    </div>
</div>

Focus State

State of the focused radio button

Disabled State

It can be disabled programmatically by setting the “disabled” attribute to the input element.

<div class="col-6">
    <div class="msds-radio-button">
        <input class="msds-radio-button__input" id="disabled-radio-button" type="radio" disabled>
        <label class="msds-radio-button__label msds-text-body-1 msds-text-gray-10" for="disabled-radio-button">
            Disabled
        </label>
    </div>
</div>

Readonly State

In order to use the radio button as read-only, you need to add the following to the input element:

• HTML class "msds-radio-button__readonly"
• "tabindex" attribute and its value set to “-1”.
• "checked" attribute (optional).

<div class="col-6">
    <div class="msds-radio-button">
        <input class="msds-radio-button__input msds-radio-button__readonly" id="readonly-radio-button" tabindex="-1"
            type="radio" checked>
        <label class="msds-radio-button__label msds-text-body-1 msds-text-gray-10" for="readonly-radio-button">
            Readonly
        </label>
    </div>
</div>