Segment Snap Radio Selector

A segment snap radio selector built with pure HTML and CSS that groups radio options into a segmented control layout. It enhances selection clarity and structured option navigation without requiring JavaScript.

Usage

Use this component when interfaces require segmented selection controls, such as pricing switches, filter options, mode selectors, or settings panels where only one option can be active.

Implementation

The effect is implemented using CSS :checked selectors combined with segmented container styling, allowing the selected option to visually snap into place with clear highlight feedback.

HTML

<div class="radio-segment">
  <label>
    <input type="radio" name="seg" checked />
    <span>On</span>
  </label>
  <label>
    <input type="radio" name="seg" />
    <span>Off</span>
  </label>
</div>

<div class="radio-segment">
  <label>
    <input type="radio" name="seg" checked />
    <span>On</span>
  </label>
  <label>
    <input type="radio" name="seg" />
    <span>Off</span>
  </label>
</div>

CSS

.radio-segment {
  width: 200px;
  padding: 0.3rem;
  border-radius: 999px;
  background: #e5e7eb;
  display: flex;
  gap: 0.25rem;
  justify-content: space-between;
}

.radio-segment label {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.radio-segment input {
  display: none;
}

.radio-segment span {
  display: block;
  padding: 0.4rem 0;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  color: #4b5563;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.radio-segment input:checked + span {
  background: #6366f1;
  color: #ffffff;
  transform: scale(1.03);
}

@media (prefers-color-scheme: dark) {
  .radio-segment {
    background: #020617;
  }

  .radio-segment span {
    color: #9ca3af;
  }

  .radio-segment input:checked + span {
    background: #818cf8;
    color: #020617;
  }
}

.radio-segment {
  width: 200px;
  padding: 0.3rem;
  border-radius: 999px;
  background: #e5e7eb;
  display: flex;
  gap: 0.25rem;
  justify-content: space-between;
}

.radio-segment label {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.radio-segment input {
  display: none;
}

.radio-segment span {
  display: block;
  padding: 0.4rem 0;
  border-radius: 999px;
  text-align: center;
  font-size: 12px;
  color: #4b5563;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.radio-segment input:checked + span {
  background: #6366f1;
  color: #ffffff;
  transform: scale(1.03);
}

@media (prefers-color-scheme: dark) {
  .radio-segment {
    background: #020617;
  }

  .radio-segment span {
    color: #9ca3af;
  }

  .radio-segment input:checked + span {
    background: #818cf8;
    color: #020617;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses segmented control styling
• Enhances radio selection clarity
• Fully responsive across breakpoints
• Suitable for filters and settings panels
• Easy to customize segment spacing and colors

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.