Pill Radio Selector

A pill radio selector built with pure HTML and CSS that presents radio options as rounded pill shaped buttons. It enhances selection visibility and modern interface clarity while maintaining a clean layout structure.

Usage

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

Implementation

The effect is implemented using CSS :checked selectors combined with pill shaped container styling and background transitions, allowing the selected option to stand out clearly within the group.

HTML

<div class="radio-pill">
  <label>
    <input type="radio" name="opt" checked />
    <span>Yes</span>
  </label>
  <label>
    <input type="radio" name="opt" />
    <span>No</span>
  </label>
</div>

<div class="radio-pill">
  <label>
    <input type="radio" name="opt" checked />
    <span>Yes</span>
  </label>
  <label>
    <input type="radio" name="opt" />
    <span>No</span>
  </label>
</div>

CSS

.radio-pill {
  width: 200px;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.radio-pill input {
  display: none;
}

.radio-pill span {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 12px;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.radio-pill input:checked + span {
  background: #6366f1;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .radio-pill span {
    background: #111827;
    color: #e5e7eb;
  }
}

.radio-pill {
  width: 200px;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.radio-pill input {
  display: none;
}

.radio-pill span {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 12px;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.radio-pill input:checked + span {
  background: #6366f1;
  color: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .radio-pill span {
    background: #111827;
    color: #e5e7eb;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses pill shaped option styling
• Enhances radio selection clarity
• Fully responsive across breakpoints
• Suitable for filters and selection groups
• Easy to customize pill color and spacing

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.