React Radio & Radio Group

    El componente Ignite UI for React Radio permite al usuario seleccionar una sola opción de un conjunto de opciones disponibles que se enumeran una al lado de la otra.

    Ignite UI for React Radio Example

    Usage

    Primero, debe instalar el paquete Ignite UI for React npm correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Luego necesitarás importar IgrRadio e IgrRadioGroup, su CSS necesario y registrar su módulo, así:

    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

    Para proporcionar una etiqueta significativa para IgrRadio, simplemente coloque algo de texto entre las etiquetas de apertura y cierre:

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

    Puede especificar si la etiqueta debe colocarse antes o después del botón IgrRadio configurando el atributo label-position. Los valores permitidos son before y after (predeterminado):

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

    La IgrRadio también puede ser etiquetada por elementos externos a ella. En este caso, el usuario tiene control total para colocar y diseñar la etiqueta de acuerdo con sus necesidades.

    <span id="radio-label">Label</span>
<IgrRadio ariaLabelledby="radio-label"></IgrRadio>

    Checked

    Puede utilizar el atributo checked para activar la 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

    Puede utilizar el atributo invalid para marcar la radio como no válida.

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

    Disabled

    Puede utilizar el atributo disabled para desactivar la 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

    ​IgrRadioGroup le permite cambiar fácilmente la direccionalidad de ubicación de los botones de opción que contiene utilizando el atributo alignment. Los valores permitidos son vertical (predeterminado) y 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

    Puede utilizar los atributos name y value cuando utilice la radio con 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

    El componente IgrRadio expone varias partes CSS (base, control y label) para brindarle control total sobre su estilo. También puede modificar los colores de la paleta global para cambiar los colores del componente de radio:

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

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

    API References

    Additional Resources