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

Modern Toggle

Red on a short white plane

Preview

PaletteSwiss

HTML

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

CSS

:root {
  --ink: #111111;
  --paper: #ffffff;
  --accent: #e10600;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --muted: #5c5c5c;
  --line: #111111;
  --chip: #f2f2f2;
}

label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-family: system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 650;
}

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

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

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

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

Tailwind

<style>
:root {
  --ink: #111111;
  --paper: #ffffff;
  --accent: #e10600;
  --accent-2: #111111;
  --on-accent: #ffffff;
  --muted: #5c5c5c;
  --line: #111111;
  --chip: #f2f2f2;
}

input {
  appearance: none;
}

input::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  margin: 0.15rem;
  border-radius: 50%;
  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-[system-ui,_sans-serif] text-[0.92rem] font-[650]">
  <input class="w-[2.4rem] h-[1.3rem] m-0 rounded-full bg-[var(--line)]" type="checkbox" checked />
  Live
</label>