switch groups

ref. https://youtu.be/l7kmBCRqfLw

by Jason Park

HTML

<fieldset class="switch-group">
  <legend>
    Text Alignment
  </legend>

  <div class="group-switch">
    <input checked type="radio" id="text-left" name="text-alignment" value="left" />
    <label for="text-left">Text align left</label>
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M14 15H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zm0-8H4c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1zM4 13h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" />
    </svg>
  </div>

  <div class="group-switch">
    <input checked type="radio" id="text-center" name="text-alignment" value="center" />
    <label for="text-center">Text align center</label>
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M7 16c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1zm-3 5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-8h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm3-5c0 .55.45 1 1 1h8c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" />
    </svg>
  </div>

  <div class="group-switch">
    <input checked type="radio" id="text-right" name="text-alignment" value="right" />
    <label for="text-right">Text align right</label>
    <svg viewBox="0 0 24 24" aria-hidden="true">
      <path d="M4 21h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-4h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 4c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z" />
    </svg>
  </div>
</fieldset>

CSS

@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";

body {
  display: grid;
  place-content: center;
  padding: var(--size-5);
  gap: var(--size-5);
  background: var(--surface-2);
}

.switch-group {
  display: flex;
  gap: var(--size-1);

  /* max-inline-size: max-content; */

  background-color: var(--surface-1);
  padding: var(--size-1);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);

  border: none;

  transition: box-shadow 0.5s var(--ease-squish-3);
}

.switch-group:is(:focus-within, :hover) {
  box-shadow: var(--shadow-4);
}

.switch-group > legend {
  visibility: hidden;
  block-size: 0;
}

.group-switch {
  display: grid;
  place-items: center;
  padding: var(--size-1);
}

.group-switch:is(input, label, svg) {
  grid-area: 1/1;
  inline-size: 100%;
  block-size: 100%;
}

.group-switch > svg {
  fill: currentColor;
}