Web Components Radio & Radio Group

The Ignite UI for Web Components Radio component allows the user to select a single option from an available set of options that are listed side by side.

Ignite UI for Web Components Radio Example

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroup {
  constructor() {
  }
}

new RadioGroup();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Group</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample">
                <div style="width: 400px; border: 1px solid gainsboro">
                    <igc-radio-group>
                        <igc-radio name="fruit" value="apple">Apple</igc-radio>
                        <igc-radio name="fruit" value="banana" checked>Banana</igc-radio>
                        <igc-radio name="fruit" value="mango">Mango</igc-radio>
                        <igc-radio name="fruit" value="orange">Orange</igc-radio>
                    </igc-radio-group>
                </div>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

Before using the IgcRadioComponent and the IgcRadioGroupComponent, you need to register them as follows:

import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the IgcRadioComponent is as follows:

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>
html

The IgcRadioComponent component doesn't work with the standard <form> element. Use Form instead.

Examples

Label

To provide a meaningful label for the IgcRadioComponent, simply place some text between the opening and closing tags:

<igc-radio>Apple</igc-radio>
html

You can specify if the label should be positioned before or after the IgcRadioComponent button by setting the label-position attribute. Allowed values are before and after(default):

<igc-radio label-position="before">Apple</igc-radio>
html

The IgcRadioComponent can also be labelled by elements external to it. In this case the user is given full control to position and style the label in accordance to their needs.

<span id="radio-label">Label</span>
<igc-radio aria-labelledby="radio-label"></igc-radio>
html

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioLabel {
  constructor() {
  }
}

new RadioLabel();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit" label-position="before" value="apple">Apple</igc-radio>
            <div style="display: flex; align-items: center">
              <span id="radio-label">Label</span>
              <igc-radio
                name="fruit"
                label-position="before"
                aria-labelledby="radio-label"
                value="orange"
              ></igc-radio>
            </div>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Checked

You can use the checked attribute to toggle on the radio.

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio checked>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>
html

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroup {
  constructor() {
  }
}

new RadioGroup();
ts

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Group</title>
        <meta charset="UTF-8" />

        <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
        <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
    </head>

    <body>
        <div id="root">
            <div class="container sample">
                <div style="width: 400px; border: 1px solid gainsboro">
                    <igc-radio-group>
                        <igc-radio name="fruit" value="apple">Apple</igc-radio>
                        <igc-radio name="fruit" value="banana" checked>Banana</igc-radio>
                        <igc-radio name="fruit" value="mango">Mango</igc-radio>
                        <igc-radio name="fruit" value="orange">Orange</igc-radio>
                    </igc-radio-group>
                </div>
            </div>
        </div>
        <!-- This script is needed only for parcel and it will be excluded for webpack -->
        <% if (false) { %>
        <script src="src/index.ts"></script>
        <% } %>
    </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Invalid

You can use the invalid attribute to mark the radio as invalid.

<igc-radio invalid></igc-radio>
html

import {defineComponents, IgcRadioComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent);
export class RadioInvalid {
  constructor() {
  }
}

new RadioInvalid();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio invalid>Invalid</igc-radio>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Disabled

You can use the disabled attribute to disable the radio.

<igc-radio-group>
  <igc-radio>Apple</igc-radio>
  <igc-radio disabled>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>
html

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioDisabled {
  constructor() {
  }
}

new RadioDisabled();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Disabled</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" disabled>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Group Alignment

The IgcRadioGroupComponent allows you to easily change the placement directionality of the radio buttons it contains using the alignment attribute. Allowed values are vertical(default) and horizontal.

<igc-radio-group alignment="horizontal">
  <igc-radio>Apple</igc-radio>
  <igc-radio>Banana</igc-radio>
  <igc-radio>Mango</igc-radio>
  <igc-radio>Orange</igc-radio>
</igc-radio-group>
html

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioGroupAlignment {
  constructor() {
  }
}

new RadioGroupAlignment();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group Alignment</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 430px; border: 1px solid gainsboro">
          <igc-radio-group alignment="horizontal">
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" checked>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Forms

You can use the name and value attributes when using the radio with Form.

<igc-radio-group>
  <igc-radio name="fruit" value="apple">Apple</igc-radio>
  <igc-radio name="fruit" value="banana">Banana</igc-radio>
  <igc-radio name="fruit" value="mango">Mango</igc-radio>
  <igc-radio name="fruit" value="banana">Orange</igc-radio>
</igc-radio-group>
html

Styling

The IgcRadioComponent component exposes several CSS parts (base, control, and label) to give you full control over its styling.

igc-radio::part(control) {
  --size: 18px;
}

igc-radio-group {
  padding: 12px;
}

igc-radio::part(checked)::after {
  background-color: var(--ig-success-500);
}

igc-radio::part(label) {
  color: var(--ig-secondary-800);
}
css

import {defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import "./index.css";

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
export class RadioStyling {
  constructor() {
  }
}

new RadioStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Radio Group</title>
    <meta charset="UTF-8" />

    <link
      rel="shortcut icon"
      href="https://static.infragistics.com/xplatform/images/browsers/wc.png"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Kanit&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Titillium Web"
    />
    <link
      rel="stylesheet"
      href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"
      type="text/css"
    />
  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <div style="width: 400px; border: 1px solid gainsboro">
          <igc-radio-group>
            <igc-radio name="fruit">Apple</igc-radio>
            <igc-radio name="fruit" checked>Banana</igc-radio>
            <igc-radio name="fruit">Mango</igc-radio>
            <igc-radio name="fruit">Orange</igc-radio>
          </igc-radio-group>
        </div>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %>
    <script src="src/index.ts"></script>
    <% } %>
  </body>
</html>
html

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
:root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

igc-radio::part(control) {
    --size: 18px;
}css