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

Usage

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

npm install igniteui-webcomponents

Before using the Radio and the RadioGroup, you need to register them as follows:

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);

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

The simplest way to start using the Radio 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>

Examples

Label

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

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

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

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

The Radio 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>

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>

Invalid

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

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

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>

Group Alignment

The RadioGroup 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>

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>

Styling

The Radio 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);
}

API References

Additional Resources

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub