React Radio & Radio Group

    O componente Rádio Ignite UI for React permite que o usuário selecione uma única opção de um conjunto disponível de opções listadas lado a lado.

    Ignite UI for React Radio Example

    Usage

    Primeiro, você precisa instalar o pacote npm Ignite UI for React correspondente executando o seguinte comando:

    npm install igniteui-react

    Você precisará então importar o IgrRadio e o IgrRadioGroup, seu CSS necessário, e registrar seu módulo, assim:

    import { IgrRadioModule, IgrRadio, IgrRadioGroupComponent, IgrRadioGroupModule } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrRadioModule.register();
IgrRadioGroupModule.register();

    <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 fornecer um rótulo significativo para o IgrRadio, basta colocar algum texto entre as tags de abertura e fechamento:

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

    Você pode especificar se o rótulo deve ser posicionado antes ou depois do IgrRadio botão definindo o label-position atributo. Os valores permitidos são before and after (default):

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

    Eles IgrRadio também podem ser rotulados por elementos externos a ele. Nesse caso, o usuário tem controle total para posicionar e estilizar a etiqueta de acordo com suas necessidades.

    <span id="radio-label">Label</span>
<IgrRadio ariaLabelledby="radio-label"></IgrRadio>

    Checked

    Você pode usar o atributo checked para ligar o rádio.

    <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

    Você pode usar o atributo invalid para marcar o rádio como inválido.

    <IgrRadio invalid="true"></IgrRadio>

    Disabled

    Você pode usar o atributo disabled para desabilitar o rádio.

    <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

    O IgrRadioGroup permite que você altere facilmente a direcionalidade de posicionamento dos botões de opção que ele contém usando o alignment atributo. Os valores permitidos são vertical (padrão) e horizontal.

    <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

    Você pode usar os atributos name e value ao usar o rádio com Form.

    <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

    O IgrRadio componente expõe várias partes CSS (base, control, e label) para dar a você controle total sobre seu 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