England Football

Radio Container 

<div class="radio-container">
    <div class="radio-option-wrapper">
        <input type="radio" id="radio-Paris" name="radio-group" value="Paris" class="radio-input" />
        <label for="radio-Paris" class="radio-label">
            <div class="radio-circle" data-value="Paris"></div>
            Paris
        </label>
    </div>
    <div class="radio-option-wrapper">
        <input type="radio" id="radio-Berlin" name="radio-group" value="Berlin" class="radio-input" />
        <label for="radio-Berlin" class="radio-label">
            <div class="radio-circle" data-value="Berlin"></div>
            Berlin
        </label>
    </div>
    <div class="radio-option-wrapper">
        <input type="radio" id="radio-Madrid" name="radio-group" value="Madrid" class="radio-input" />
        <label for="radio-Madrid" class="radio-label">
            <div class="radio-circle" data-value="Madrid"></div>
            Madrid
        </label>
    </div>
    <div class="radio-option-wrapper">
        <input type="radio" id="radio-London" name="radio-group" value="London" class="radio-input" />
        <label for="radio-London" class="radio-label">
            <div class="radio-circle" data-value="London"></div>
            London
        </label>
    </div>
</div>

No notes defined.

{
  "radioOptions": [
    "Paris",
    "Berlin",
    "Madrid",
    "London"
  ]
}
  • Content: 
    /* stylelint-disable */
.radio-input {
  display: none;
}

.radio-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
  transition: background-color 0.3s, border-color 0.3s;
}

.radio-input:checked + .radio-label .radio-circle {
  position: relative;
  background-color: transparent;
  border-color: #FFFFFF;
}

.radio-option-wrapper.checked .radio-circle {
  background-color: #007bff;
  border-color: #007bff;
}

.radio-label {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}

.radio-label .radio-circle {
  margin-right: 10px;
}

.radio-input:checked + .radio-label .radio-circle::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  background-color: #FFFFFF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
  • URL: /components/raw/radio-container/Radio-container.scss
  • Filesystem Path: src/library/components/Radio-container/Radio-container.scss
  • Size: 941 Bytes 
<div class="radio-container">
  {{#each radioOptions}}
    <div class="radio-option-wrapper">
      <input type="radio" id="radio-{{this}}" name="radio-group" value="{{this}}" class="radio-input" />
      <label for="radio-{{this}}" class="radio-label">
        <div class="radio-circle" data-value="{{this}}"></div>
        {{this}}
      </label>
    </div>
  {{/each}}
</div>