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 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);

    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>

    [!WARNING] 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>

    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>

    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>

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

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

    API References

    Additional Resources