2+ Radio Button Components - Vanilla CSS

Radio buttons are graphical control elements that allow users to select one option from a set of mutually exclusive choices. They are commonly used in forms, surveys, and other interfaces where users need to make selections. Our collection includes various types of radio button components, such as checkboxes and toggle switches, each serving specific design and functionality requirements. Checkboxes allow users to select multiple options from a set, while toggle switches provide a more compact and visually appealing way to toggle between two states. With our collection, you can easily integrate these components into your projects, improving usability and enhancing the overall user experience.

Unique Inline Radio Buttons

Learn how to create stylish inline radio buttons with our comprehensive guide. Discover how to use HTML and CSS to design modern, clean, and visually appealing radio buttons for your forms.

Author: Admin

Preview
Code

<div class="radio-container">
        <input type="radio" id="radio1" name="unique-radio" class="radio-input">
        <label for="radio1" class="radio-label">Option 1</label>
        
        <input type="radio" id="radio2" name="unique-radio" class="radio-input">
        <label for="radio2" class="radio-label">Option 2</label>
        
        <input type="radio" id="radio3" name="unique-radio" class="radio-input">
        <label for="radio3" class="radio-label">Option 3</label>
    </div>

/* Basic Reset */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
}

/* Container for radio buttons */
.radio-container {
    display: flex;
    flex-direction: column;
    margin: 20px;
}

/* Hide default radio buttons */
.radio-input {
    display: none;
}

/* Label styling */
.radio-label {
    display: flex;
    align-items: center;
    position: relative;
    padding: 10px 20px;
    margin: 5px 0;
    cursor: pointer;
    border-radius: 25px;
    background-color: #ffffff;
    border: 2px solid #ccc;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Custom radio button styling */
.radio-label::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ccc;
    border: 2px solid #888;
    margin-right: 10px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Change radio button style on checked state */
.radio-input:checked + .radio-label::before {
    background-color: #4caf50;
    border-color: #4caf50;
}

/* Change label background color on hover */
.radio-label:hover {
    background-color: #f0f0f0;
}

/* Adjust the label for checked state */
.radio-input:checked + .radio-label {
    border-color: #4caf50;
}

```
No need of JavaScript
```

Simple Radio Button

Explore the simplicity of radio button implementation using HTML and vanilla CSS, perfect for adding customizable input controls to your website without external dependencies

Author: Admin

Preview
Code

<div class="container">
  <div class="radio">
    <input id="radio-1" name="radio" type="radio" checked>
    <label for="radio-1" class="radio-label">Checked</label>
  </div>

  <div class="radio">
    <input id="radio-2" name="radio" type="radio">
    <label  for="radio-2" class="radio-label">Unchecked</label>
  </div>

  <div class="radio">
    <input id="radio-3" name="radio" type="radio" disabled>
    <label for="radio-3" class="radio-label">Disabled</label>
  </div>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.radio {
  margin: 0.5rem;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background: #f4f4f4;
  border-radius: 100%;
  border: 1px solid #b4b4b4;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  position: relative;
  top: -0.2em;
  margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
}
.radio input[type=radio]:checked + .radio-label:before {
  background-color: #3197EE;
  box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: #3197EE;
}
.radio input[type=radio]:disabled + .radio-label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b4b4b4;
  background: #b4b4b4;
}
.radio input[type=radio] + .radio-label:empty:before {
  margin-right: 0;
}

```
No need of JavaScript
```