Toggle (Restyled Radio Button)

A toggle is a visually enhanced radio button that allows users to select a single option from a set. Amazium applies custom styling to ensure consistent appearance across all browsers.

Modern switch-like styling for better UX
Supports enabled, disabled, and invalid states
Fully accessible with keyboard navigation

Default Toggle

<fieldset>
  <div class="input input--toggle">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Disabled Toggle

<fieldset disabled>
  <div class="input input--toggle">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>

Invalid Toggle

<fieldset class="invalid">
  <div class="input input--toggle">
    <span>
      <input type="radio" checked="checked" name="radio" id="radio1">
      <label for="radio1">
        <span>Radio - Checked</span>
      </label>
    </span>
    <span>
      <input type="radio" name="radio" id="radio2">
      <label for="radio2">
        <span>Radio - Unchecked</span>
      </label>
    </span>
  </div>
  <p class="message">Sorry looks like you choose poorly.</p>
</fieldset>