Skip to main content

Toggle Switch

Default

Result
Loading...
Live Editor
<div class="fds-toggle">
  <input type="checkbox" class="fds-toggle__input" name="toggle-default" id="toggle-default" />
  <label for="toggle-default" class="fds-toggle__label">
    <span class="fds-toggle__label-mark"></span>
  </label>
</div>

With label

Result
Loading...
Live Editor
<div class="fds-toggle">
  <input type="checkbox" class="fds-toggle__input" name="toggle-with-label" id="toggle-with-label" />
  <label for="toggle-with-label" class="fds-toggle__label">
    <span class="fds-toggle__label-text">Toggle label</span>
    <span class="fds-toggle__label-mark"></span>
  </label>
</div>

Size

Default

Result
Loading...
Live Editor
<div class="fds-toggle">
  <input type="checkbox" class="fds-toggle__input" name="toggle-default-2" id="toggle-default-2" />
  <label for="toggle-default-2" class="fds-toggle__label">
    <span class="fds-toggle__label-text">Default toggle</span>
    <span class="fds-toggle__label-mark"></span>
  </label>
</div>

Large

Result
Loading...
Live Editor
<div class="fds-toggle fds-toggle--lg">
  <input type="checkbox" class="fds-toggle__input" name="toggle-large" id="toggle-large" />
  <label for="toggle-large" class="fds-toggle__label">
    <span class="fds-toggle__label-text">Large toggle</span>
    <span class="fds-toggle__label-mark"></span>
  </label>
</div>

States

Checked

Result
Loading...
Live Editor
<div class="fds-toggle">
  <input type="checkbox" class="fds-toggle__input" name="toggle-checked" id="toggle-checked" checked />
  <label for="toggle-checked" class="fds-toggle__label">
    <span class="fds-toggle__label-text">Checked toggle</span>
    <span class="fds-toggle__label-mark"></span>
  </label>
</div>

Disabled

Result
Loading...
Live Editor
<div class="fds-toggle">
  <input type="checkbox" class="fds-toggle__input" name="toggle-disabled" id="toggle-disabled" disabled />
  <label for="toggle-disabled" class="fds-toggle__label">
    <span class="fds-toggle__label-text">Disabled toggle</span>
    <span class="fds-toggle__label-mark"></span>
  </label>
</div>

Checked disabled

Result
Loading...
Live Editor
<div class="fds-toggle">
  <input type="checkbox" class="fds-toggle__input" name="toggle-checked-disabled" id="toggle-checked-disabled" checked disabled />
  <label for="toggle-checked-disabled" class="fds-toggle__label">
    <span class="fds-toggle__label-text">Checked disabled toggle</span>
    <span class="fds-toggle__label-mark"></span>
  </label>
</div>