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 oIgcRadioComponent e o e,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 Comecando.

    A maneira mais simples de começar a usar oIgcRadioComponent é 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 uma etiqueta significativa para issoIgcRadioComponent, basta colocar um 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 doIgcRadioComponent botão definindo olabel-position atributo. Valores permitidos sãobefore eafter (padrão):

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

    OIgcRadioComponent também pode ser rotulado por elementos externos a ele. Nesse caso, o usuário recebe 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 ochecked atributo para ativar 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 oinvalid atributo para marcar o rádio como inválido.

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

    Disabled

    Você pode usar odisabled atributo para desativar 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

    EleIgcRadioGroupComponent permite mudar facilmente a direcionalidade de posicionamento dos botões de rádio que contém usando oalignment atributo. Valores permitidos sãovertical (padrão) ehorizontal.

    <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 osname atributos evalue ao usar o rádio comForm.

    <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

    OIgcRadioComponent componente expõe várias partes CSS (base,control, andlabel) para te dar 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