React Switch

    The Ignite UI for React Switch component is a binary choice selection component that behaves similarly to the switch component in iOS.

    React Switch Example

    Usage

    At its core, the IgrSwitch component allows for toggling between on/off states. The default styling is done according to the selection controls specification in the Material Design guidelines.

    First, you need to the install the corresponding Ignite UI for React npm package by running the following command:

    npm install igniteui-react

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

    import { IgrSwitchModule, IgrSwitch } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrSwitchModule.register();

    <IgrSwitch></IgrSwitch>

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

    Examples

    Label

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

    <IgrSwitch><span>Label</span></IgrSwitch>

    Você pode especificar se o rótulo deve ser posicionado antes ou depois do switch toggle definindo o atributo labelPosition do switch. Os valores permitidos são before e after (padrão):

    <IgrSwitch ariaLabelledby="switchLabel" labelPosition="Before" ><span id="switch-label">Label</span></IgrSwitch>

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

    <span id="switch-label">Label</span>
<IgrSwitch ariaLabelledby="switchLabel"></IgrSwitch>

    Checked

    Você pode usar o atributo checked para ativar o interruptor.

    <IgrSwitch checked="true"></IgrSwitch>

    Required

    Você pode usar o atributo required para marcar a opção como necessária.

    <IgrSwitch required="true"></IgrSwitch>

    Invalid

    Você pode usar o atributo invalid para marcar a opção como inválida.

    Disabled

    Você pode usar o atributo disabled para desabilitar a opção.

    <IgrSwitch disabled="true"></IgrSwitch>

    Forms

    Você pode usar os atributos name e value ao usar o switch com Form.

    <IgrSwitch name="wifi" value="enabled"></IgrSwitch>

    Styling

    The IgrSwitch component exposes several CSS parts to give you full control over its styling:

    Nome Descrição
    base The base wrapper of the switch.
    control The switch input element.
    thumb The position indicator of the switch.
    label The switch label. 
    igc-switch::part(thumb) {
  background-color: var(--ig-success-500);
  box-shadow: none;
}

igc-switch::part(thumb checked) {
  background-color: var(--ig-gray-50);
}

igc-switch::part(control checked) {
  background-color: var(--ig-success-500);
}

    API References

    Additional Resources