React Radio & Radio Group

    The Ignite UI for React 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 React Radio Example

    Usage

    First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react

    You will then need to import the IgrRadio and the IgrRadioGroup, its necessary CSS, and register its module, like so:

    import { IgrRadioModule, IgrRadio, IgrRadioGroupComponent, IgrRadioGroupModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrRadioModule.register();
IgrRadioGroupModule.register();

    <IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    [!WARNING] The IgrRadio component doesn't work with the standard <form> element. Use IgrForm instead.

    Examples

    Label

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

    <IgrRadio><span>Label</span></IgrRadio>

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

    <IgrRadio labelPosition="before"><span>Apple</span></IgrRadio>

    The IgrRadio 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>
<IgrRadio ariaLabelledby="radio-label"></IgrRadio>

    Checked

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

    <IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" checked="true"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    Invalid

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

    <IgrRadio invalid="true"></IgrRadio>

    Disabled

    You can use the disabled attribute to disable the radio.

    <IgrRadioGroup>
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" disabled="true"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    Group Alignment

    The IgrRadioGroup 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.

    <IgrRadioGroup alignment="horizontal">
  <IgrRadio value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio value="banana" disabled="true"><span>Banana</span></IgrRadio>
  <IgrRadio value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    Forms

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

    <IgrRadioGroup>
  <IgrRadio name="fruit" value="apple"><span>Apple</span></IgrRadio>
  <IgrRadio name="fruit" value="banana"><span>Banana</span></IgrRadio>
  <IgrRadio name="fruit" value="Mango"><span>Mango</span></IgrRadio>
  <IgrRadio name="fruit" value="orange"><span>Orange</span></IgrRadio>
</IgrRadioGroup>

    Styling

    The IgrRadio component exposes several CSS parts (base, control, and label) to give you full control over its styling. You can also modify the global palette colors to change the colors of the radio component:

    :root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

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

    API References

    Additional Resources