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.

    Ignite UI for Web Components Radio Example

    Usage

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

    npm install igniteui-webcomponents

    Antes de usar elIgcRadioComponent y elIgcRadioGroupComponent, debes registrarlos de la siguiente manera:

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);

    Para una introducción completa al Ignite UI for Web Components, lee el tema Empezar.

    La forma más sencilla de empezar a usar elIgcRadioComponent uso 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 Form instead.

    Examples

    Label

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

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

    Puedes especificar si la etiqueta debe colocarse antes o después delIgcRadioComponent botón configurando ellabel-position atributo. Los valores permitidos sonbefore yafter (por defecto):

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

    TambiénIgcRadioComponent pueden etiquetarse por elementos externos a él. En este caso, el usuario tiene control total para posicionar y estilizar la etiqueta según sus necesidades.

    <span id="radio-label">Label</span>
<igc-radio aria-labelledby="radio-label"></igc-radio>

    Checked

    Puedes usar elchecked atributo 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

    Puedes usar elinvalid atributo para marcar la radio como inválida.

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

    Disabled

    Puedes usar eldisabled atributo 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

    PermiteIgcRadioGroupComponent cambiar fácilmente la dirección de colocación de los botones de radio que contiene usando elalignment atributo. Los valores permitidos sonvertical (por defecto) yhorizontal.

    <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

    Puedes usar losname atributos yvalue cuando usas la radio conForm.

    <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

    ElIgcRadioComponent componente expone varias partes CSS (base,control, andlabel) para darte control total sobre su estilo.

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

    API References

    Additional Resources