Back to Snippets

Segmented Control Toggle

Replace standard radio buttons with this sleek segmented control, commonly found in iOS interfaces. It uses a sliding background pill to indicate selection, which provides a premium user experience.

383

#css

#form

#toggle

#radio

#segmented control

#ios style

#ui

/HTML *CSS ()JS Output Live Updates

* { box-sizing: border-box; }
body {
  font-family: system-ui, "Segoe UI", sans-serif;
  background: #f8fafc;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.segmented-control {
  background: #e2e8f0;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  position: relative;
  width: 300px;
}

.segmented-control input {
  display: none;
}

.segmented-control label {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s;
}

.segmented-control input:checked + label {
  color: #0f172a;
}

.slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(33.33% - 5px); /* Divide by number of options */
  height: calc(100% - 8px);
  background: white;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

/* Move slider based on selection */
#daily:checked ~ .slider { transform: translateX(0); }
#weekly:checked ~ .slider { transform: translateX(100%); }
#monthly:checked ~ .slider { transform: translateX(200%); }

/* Adjustment for spacing gap */
#weekly:checked ~ .slider { transform: translateX(calc(100% + 2px)); }
#monthly:checked ~ .slider { transform: translateX(calc(200% + 4px)); }

Segmented Control Toggle

Share Code Snippet