7 results

Preview
Brutal Toggle
Thick rules and uppercase
Preview
Chic Toggle
Serif type and a thin rule
Preview
Dense Toggle
Tight gaps and mono type
Preview
Editorial Toggle
Measure against a heading
Preview
Modern Toggle
Red on a short white plane
Preview
Soft Toggle
Large radii and a pale plane
Preview
Switch Toggle
A toggle built from a checkbox

Chic Toggle

Serif type and a thin rule

Preview

PaletteChampagne

HTML

<label>
  <input type="checkbox" checked />
  Live
</label>

CSS

:root {
  --ink: #3f382f;
  --paper: #f7f1e6;
  --accent: #8d6a3e;
  --accent-2: #5a5148;
  --on-accent: #fff8ee;
  --muted: #8a7f72;
  --line: #d8cbb8;
  --chip: #efe6d4;
}

label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-family: Palatino, Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
}

input {
  appearance: none;
  width: 2.4rem;
  height: 1.3rem;
  margin: 0;
  border-radius: 0;
  background: var(--line);
}

input::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem;
  border-radius: 0;
  background: var(--paper);
}

input:checked {
  background: var(--accent);
}

input:checked::before {
  transform: translateX(1.05rem);
}

Tailwind

<style>
:root {
  --ink: #3f382f;
  --paper: #f7f1e6;
  --accent: #8d6a3e;
  --accent-2: #5a5148;
  --on-accent: #fff8ee;
  --muted: #8a7f72;
  --line: #d8cbb8;
  --chip: #efe6d4;
}

input {
  appearance: none;
}

input::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem;
  border-radius: 0;
  background: var(--paper);
}

input:checked {
  background: var(--accent);
}

input:checked::before {
  transform: translateX(1.05rem);
}
</style>
<label class="inline-flex items-center gap-[0.55rem] text-[var(--ink)] font-[Palatino,_Georgia,_serif] text-[0.95rem] font-medium">
  <input class="w-[2.4rem] h-[1.3rem] m-0 rounded-[0] bg-[var(--line)]" type="checkbox" checked />
  Live
</label>