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

    Você pode usar o atributo checked para ligar o rádio.

    <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

    Você pode usar o atributo invalid para marcar o rádio como inválido.

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

    Disabled

    Você pode usar o atributo disabled para desabilitar o rádio.

    <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

    Você pode usar os atributos name e value ao usar o rádio com Form.

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

    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