Rádio Blazor e Grupo de Rádio

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

    Ignite UI for Blazor Radio Example

    Usage

    Antes de usar o IgbRadio e o IgbRadioGroup, você precisa registrá-los da seguinte forma:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbRadioModule),
  typeof(IgbRadioGroupModule)
);

    Você também precisará vincular um arquivo CSS adicional para aplicar o estilo aos componentes IgbRadio e IgbRadioGroup. O seguinte precisa ser colocado no arquivo wwwroot/index.html em um projeto Blazor Web Assembly ou no arquivo Pages/_Host.cshtml em um projeto Blazor Server:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

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

    Examples

    Label

    Para fornecer um rótulo significativo para o IgbRadio, basta colocar algum texto entre as tags de abertura e fechamento:

    <IgbRadio>Apple</IgbRadio>

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

    <IgbRadio LabelPosition="@RadioLabelPosition.Before">Apple</IgbRadio>

    O IgbRadio também pode ser rotulado por elementos externos a ele. Neste caso, o usuário tem controle total para posicionar e estilizar o rótulo de acordo com suas necessidades.

    <span id="radio-label">Label</span>
<IgbRadio AriaLabelledBy="radio-label" />

    Checked

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

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Checked="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Invalid

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

    <IgbRadio Invalid="true" />

    Disabled

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

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Disabled="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Group Alignment

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

    <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Forms

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

    <IgbRadioGroup>
    <IgbRadio Name="fruit" Value="apple">Apple</IgbRadio>
    <IgbRadio Name="fruit" Value="banana">Banana</IgbRadio>
    <IgbRadio Name="fruit" Value="mango">Mango</IgbRadio>
    <IgbRadio Name="fruit" Value="orange">Orange</IgbRadio>
</IgbRadioGroup>

    Styling

    The IgbRadio component exposes several CSS parts (base, control, and label) to give you full control over its styling.

    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