Switch

Switches toggle the selection of an item on and off.

Usage

Switch toggles a single setting on or off. It renders role="switch", not a native form control, so associate an accessible name with aria-label or aria-labelledby.

Checked and disabled states

Use checked with onCheckedChange in React, [(checked)] in Angular, or bind:checked in Svelte. defaultChecked captures the initial uncontrolled state. A controlled switch emits a request but does not change until its owner supplies the new value. Use disabled to prevent interaction.

import { useState } from 'react';
import { Switch } from '@udixio/ui-react';

export default function SwitchStatesReact() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="flex flex-wrap items-center gap-6">
      <Switch
        aria-label="Controlled"
        checked={checked}
        onCheckedChange={setChecked}
      />
      <Switch aria-label="Default checked" defaultChecked />
      <Switch aria-label="Disabled" disabled />
      <Switch aria-label="Disabled and checked" defaultChecked disabled />
    </div>
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Switch } from '@udixio/ui-angular';

@Component({
  selector: 'switch-states-angular-example',
  standalone: true,
  imports: [Switch],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <div class="flex flex-wrap items-center gap-6">
      <udx-switch aria-label="Controlled" [(checked)]="checked" />
      <udx-switch aria-label="Default checked" defaultChecked />
      <udx-switch aria-label="Disabled" disabled />
      <udx-switch aria-label="Disabled and checked" defaultChecked disabled />
    </div>
  `,
})
export class SwitchStatesAngular {
  protected checked = false;
}

<script lang="ts">
  import { Switch } from '@udixio/ui-svelte';

  let checked = $state(false);
</script>

<div class="flex flex-wrap items-center gap-6">
  <Switch aria-label="Controlled" bind:checked />
  <Switch aria-label="Default checked" defaultChecked />
  <Switch aria-label="Disabled" disabled />
  <Switch aria-label="Disabled and checked" defaultChecked disabled />
</div>

With icons

Provide activeIcon and/or inactiveIcon to display inside the thumb. The thumb slide between positions is driven by a shared @udixio/core/dom controller, so React, Angular and Svelte animate identically.

import { useState } from 'react';
import { Switch } from '@udixio/ui-react';
import { iDarkMode } from '@udixio/icons-rounded-400/dark_mode';
import { iLightMode } from '@udixio/icons-rounded-400/light_mode';

export default function SwitchIconsReact() {
  const [checked, setChecked] = useState(true);

  return (
    <Switch
      aria-label="Theme"
      checked={checked}
      onCheckedChange={setChecked}
      activeIcon={iLightMode}
      inactiveIcon={iDarkMode}
    />
  );
}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { iDarkMode } from '@udixio/icons-rounded-400/dark_mode';
import { iLightMode } from '@udixio/icons-rounded-400/light_mode';
import { Switch } from '@udixio/ui-angular';

@Component({
  selector: 'switch-icons-angular-example',
  standalone: true,
  imports: [Switch],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <udx-switch
      aria-label="Theme"
      [(checked)]="checked"
      [activeIcon]="lightIcon"
      [inactiveIcon]="darkIcon"
    />
  `,
})
export class SwitchIconsAngular {
  protected checked = true;
  protected readonly lightIcon = iLightMode;
  protected readonly darkIcon = iDarkMode;
}

<script lang="ts">
  import { Switch } from '@udixio/ui-svelte';
  import { iDarkMode } from '@udixio/icons-rounded-400/dark_mode';
  import { iLightMode } from '@udixio/icons-rounded-400/light_mode';

  let checked = $state(true);
</script>

<Switch
  aria-label="Theme"
  bind:checked
  activeIcon={iLightMode}
  inactiveIcon={iDarkMode}
/>

Accessibility

Switch exposes aria-checked and toggles with a click or with Space/Enter when focused. It never renders a visible label on its own; pair it with aria-label, aria-labelledby, or a visible label element referencing it through your own markup.