Web Components Rádio e Grupo de Rádio

    O componente Ignite UI for Web Components 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 Web Components Radio Example

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents

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

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

defineComponents(IgcRadioComponent, IgcRadioGroupComponent);

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    A maneira mais simples de começar a usar o IgcRadioComponent é a seguinte:

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

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

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

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

    O IgcRadioComponent 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>
<igc-radio aria-labelledby="radio-label"></igc-radio>

    Checked

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

    <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

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

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

    Disabled

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

    <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

    O IgcRadioGroupComponent permite que você altere facilmente a direcionalidade de posicionamento dos botões de opção que ele contém usando o atributo alignment. Os valores permitidos são vertical (padrão) e 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

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

    <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

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