React Radio & Radio Group

    El componente Ignite UI for React Radio permite al usuario seleccionar una única opción de un conjunto de opciones disponibles que aparecen enumeradas una al lado de la otra.

    Ejemplo de Ignite UI for React Radio

    EXAMPLE
    TSX
    CSS

    ¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

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

    npm install igniteui-react
    cmd

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

    El componente IgrRadio no funciona con el elemento estándar <form>. En su lugar, utilice Formulario.

    Ejemplos

    Etiqueta

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

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

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

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

    EXAMPLE
    TSX
    CSS

    Comprobado

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

    EXAMPLE
    TSX
    CSS

    Inválido

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

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

    EXAMPLE
    TSX
    CSS

    Desactivado

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

    EXAMPLE
    TSX
    CSS

    Alineación de grupo

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

    EXAMPLE
    TSX
    CSS

    Formularios

    Puede usar los name atributos y value cuando use la radio con 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>
    tsx
    Ignite UI for React | CTA Banner

    Estilo

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

    EXAMPLE
    TSX
    CSS

    Referencias de API

    Recursos adicionales