Day 23: Radio button 📱

A radio button component is a form item used when only one selection is possible in a group of mutually exclusive choices.

The example component is visible below.

A few notes about this notification component:

• CSS Variables are used for colors and spacing,
• CSS Flexbox is used for layout,
• the before and after components are used to style the checkbox,
• the :checked selector is used to determine if the checkbox is checked,
• the ~ sibling selector is used to target the sibling label,
• the inline SVG is used to add a custom checkbox.

The code:

<div class="advent-radio">
  <input type="radio" id="radio1" name="radio" checked>
  <label for="radio1">TV 📺</label>
</div>
<div class="advent-radio">
  <input type="radio" id="radio2" name="radio">
  <label for="radio2">Phone 📱</label>
</div>
<div class="advent-radio">
  <input type="radio" id="radio3" name="radio">
  <label for="radio3">Game console 🎮</label>
</div>

.advent-radio {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;
  --size-xmas: 1em;

  position: relative;
  margin-bottom: var(--size-xmas);
  padding: calc(var(--size-xmas) / 6) calc(var(--size-xmas) / 3);
  overflow: hidden;
}

.advent-radio input[type="radio"] {
  position: absolute;
  left: -100vw;
}

.advent-radio label {
  color: var(--color-xmas-beta);
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.advent-radio input[type="radio"]:checked ~ label {
  color: var(--color-xmas-gamma);
}

.advent-radio label:before,
.advent-radio label:after {
  content: "";
  display: inline-block;
  min-height: var(--size-xmas);
  min-width: var(--size-xmas);
}

.advent-radio label:before {
  background-color: var(--color-xmas-alpha);
  box-shadow: 0 0 0 1px currentColor;
  border-radius: 50%;
  margin-right: calc(var(--size-xmas) / 2);
}

.advent-radio label:after {
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(var(--size-xmas) / 2);
  position: absolute;
  left: 0;
}

.advent-radio input[type="radio"]:checked ~ label:after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'><circle r='3'/></svg>");
}

.advent-radio input[type="radio"]:focus ~ label:before {
  outline: 1px solid currentColor;
  outline-offset: calc(var(--size-xmas) / 4);
}