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.

    Ignite UI for Web Components Radio Example

    Usage

    Primero, debe instalar la Ignite UI for Web Components ejecutando el siguiente comando:

    npm install igniteui-webcomponents

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

    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>

    [!WARNING] The IgcRadioComponent component doesn't work with the standard <form> element. Use IgcFormComponent instead.

    Examples

    Label

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

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

    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>

    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>

    Checked

    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>

    Invalid

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

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

    Disabled

    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>

    Group Alignment

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

    Forms

    Puede utilizar los atributos de name y value cuando utilice la radio con IgcFormComponent.

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

    Styling

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

    API References

    Additional Resources