Radio

<style>
  #radio-default-example .flex-row {
    gap: 12px;
    height: 40px;
    padding: 0px 12px;
  }
  #radio-default-example label {
    line-height: 40px;
  }
</style>
<div class="flex-column" id="radio-default-example">
  <p>Which is your favorite season?</p>

  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-default-example-1" name="browser" />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-default-example-1">Summer</label>
  </div>
  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-default-example-2" name="browser" />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-default-example-2">Spring</label>
  </div>
  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-default-example-3" name="browser" />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-default-example-3">Winter</label>
  </div>
</div>

<style>
  #radio-disabled-example .flex-row {
    gap: 12px;
    height: 40px;
    padding: 0px 12px;
  }
  #radio-disabled-example label {
    line-height: 40px;
  }
</style>
<div class="flex-column" id="radio-disabled-example">
  <p>Which browser are you using?</p>

  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-disabled-example-1" name="browser" disabled />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-disabled-example-1">Chrome</label>
  </div>
  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-disabled-example-2" name="browser" disabled checked />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-disabled-example-2">Firefox</label>
  </div>
  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-disabled-example-3" name="browser" disabled />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-disabled-example-3">Safari</label>
  </div>
</div>

<style>
  #radio-custom-example {
    --flexy-comp-radio-dot-size: 0px;
    --flexy-comp-radio-selected-outline-width: 6px;
  }
  #radio-custom-example .flex-row {
    gap: 12px;
    height: 40px;
    padding: 0px 12px;
  }
  #radio-custom-example label {
    line-height: 40px;
  }
</style>
<div class="flex-column" id="radio-custom-example">
  <p>Which operating system are you using?</p>

  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-custom-example-4" name="os" />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-custom-example-4">Linux</label>
  </div>
  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-custom-example-5" name="os" />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-custom-example-5">MacOS</label>
  </div>
  <div class="flex-row">
    <div class="flexy-radio">
      <input type="radio" id="radio-custom-example-6" name="os" />
      <div class="flexy-radio__circle"></div>
    </div>
    <label for="radio-custom-example-6">Windows</label>
  </div>
</div>