Web Components Radio & Grupo Radio

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

    Ejemplo de radio Ignite UI for Web Components

    EXAMPLE
    TS
    HTML
    CSS

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

    Uso

    Primero, debe instalar la 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 Introducción.

    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 | Banner de llamada a la acción

    Estilo

    El componente IgcRadioComponent 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
    TS
    HTML
    CSS

    Referencias de API

    Recursos adicionales