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.

    Ignite UI for React Radio Example

    Usage

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

    npm install igniteui-react

    You will then need to import the IgrRadio and the IgrRadioGroup, its necessary CSS, and register its module, like so:

    import { IgrRadio, IgrRadioGroupComponent } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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

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

    Examples

    Label

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

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

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

    <IgrRadio labelPosition="before"><span>Apple</span></IgrRadio>

    TambiénIgrRadio 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>
<IgrRadio aria-labelledby="radio-label"></IgrRadio>

    Checked

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

    Invalid

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

    <IgrRadio invalid={true}></IgrRadio>

    Disabled

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

    Group Alignment

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

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

    Forms

    Puedes usar losname atributos yvalue cuando usas la radio conForm.

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

    Styling

    ElIgrRadio 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