Web Components Radio y Grupo de Radio

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

    Ejemplo de Ignite UI for Web Components radio

    EXAMPLE
    TS
    HTML
    CSS

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Uso

    En primer lugar, debe instalar el Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents
    cmd

    Antes de utilizar IgcRadioComponent e IgcRadioGroupComponent, debe registrarlos de la siguiente manera:

    import { defineComponents, IgcRadioComponent, IgcRadioGroupComponent } from 'igniteui-webcomponents';
    import 'igniteui-webcomponents/themes/light/bootstrap.css';
    
    defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
    ts

    Para obtener una introducción completa a Ignite UI for Web Components, lea el tema Primeros pasos.

    La forma más sencilla de empezar a utilizarlo IgcRadioComponent es la siguiente:

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

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

    Ejemplos

    Etiqueta

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

    <igc-radio>Apple</igc-radio>
    html

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

    <igc-radio label-position="before">Apple</igc-radio>
    html

    El IgcRadioComponent también puede ser etiquetado por elementos externos al mismo. 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>
    <igc-radio aria-labelledby="radio-label"></igc-radio>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Comprobado

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

    EXAMPLE
    TS
    HTML
    CSS

    Inválido

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

    <igc-radio invalid></igc-radio>
    html

    EXAMPLE
    TS
    HTML
    CSS

    Desactivado

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

    EXAMPLE
    TS
    HTML
    CSS

    Alineación de grupo

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

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

    EXAMPLE
    TS
    HTML
    CSS

    Formularios

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

    Estilo

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

    EXAMPLE
    TS
    HTML
    CSS

    Referencias de API

    Recursos adicionales