Radio Tabs

Tabs switched with radios

Preview

PaletteDarkMonoWarm

HTML

<form>
      <fieldset>
        <legend>Panels</legend>
        <input id="one" type="radio" name="panel" checked>
        <label for="one">Type</label>
        <input id="two" type="radio" name="panel">
        <label for="two">Space</label>
        <p class="one">Fluid type tokens.</p>
        <p class="two">A single gap value.</p>
      </fieldset>
    </form>

CSS

:root {
  --ink: #241c16;
  --paper: #fffaf1;
  --accent: #d4552b;
  --accent-2: #4338ca;
  --on-accent: #fff;
  --muted: #6a6156;
  --line: #d7ccb8;
  --chip: #efe6d6;
}

fieldset {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.4rem 0.6rem;
  min-width: min(100%, 18rem);
  margin: 0;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--paper);
}

legend { font-weight: 800; }

input {
  position: absolute;
  opacity: 0;
}

label {
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-weight: 700;
}

input:checked + label {
  background: var(--ink);
  color: var(--on-accent);
}

p {
  grid-column: 1 / -1;
  display: none;
  margin: 0.4rem 0 0;
}

input:nth-of-type(1):checked ~ .one,
input:nth-of-type(2):checked ~ .two {
  display: block;
}