Toggle

New

Default

Show code

<div class="iai-toggle__item">
  <label class="govuk-label iai-toggle__label" for="toggle">Toggle label</label>
  <input class="iai-toggle__input" type="checkbox" role="switch" id="toggle" />
</div>

---
import { ToggleItem, ToggleLabel, Toggle } from "@i-dot-ai-npm/component-library-astro";
---

<ToggleItem>
  <ToggleLabel for="toggle"> Toggle label </ToggleLabel>
  <Toggle id="toggle" />
</ToggleItem>

import { ToggleItem, ToggleLabel, Toggle } from "@i-dot-ai-npm/component-library-react";

export default function Example() {
  return (
    <ToggleItem>
      <ToggleLabel htmlFor="toggle"> Toggle label </ToggleLabel>
      <Toggle id="toggle" />
    </ToggleItem>
  );
}

<script>
  import { ToggleItem, ToggleLabel, Toggle } from "@i-dot-ai-npm/component-library-svelte";
</script>

<ToggleItem>
  <ToggleLabel for="toggle"> Toggle label </ToggleLabel>
  <Toggle id="toggle" />
</ToggleItem>

import { ToggleItem, ToggleLabel, Toggle } from "@i-dot-ai-npm/component-library-solid";

export default function Example() {
  return (
    <ToggleItem>
      <ToggleLabel for="toggle"> Toggle label </ToggleLabel>
      <Toggle id="toggle" />
    </ToggleItem>
  );
}

When to use this component

Use the toggle when a user changes a setting that takes effect immediately, with no submit step, and the setting has a sensible default state of on or off.

When not to use this component

Do not use the toggle if the change needs a submit button to take effect, if there is no sensible default state, or if the choice is a yes/no answer to a question — use a checkbox or two radio buttons instead.