A radio button is a part of form and it is a user interface element allows users to select one option from a list of choices.

Using our class ".null-form-radio-button" , you will get a simple and clean design.

- Basic:

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
   <input class="null-form-radio-button" type="radio" id="Google-Chrome" name="browser" value="Google Chrome">
   <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
   <input class="null-form-radio-button" type="radio" id="Mirosoft-Edge" name="browser" value="Mirosoft Edge">
   <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

Add checked attributes to get the pre-select value: 

<form method="get" action="/">

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
    <input class="null-form-radio-button" type="radio" id="Google-Chrome" name="browser" value="Google Chrome">
    <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
    <input class="null-form-radio-button" type="radio" id="Mirosoft-Edge" name="browser" value="Mirosoft Edge" checked>
    <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

</form>

Want radio buttons to be next to each other? then wrap them with flex class: 

<form method="get" action="/">

<div class="null-display-flex null-flex-wrap-wrap null-gap-10">
    <div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
        <input class="null-form-radio-button" type="radio" id="Google-Chrome" name="browser" value="Google Chrome">
        <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
    </div><!--End null-margin-bottom-20-->

    <div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
        <input class="null-form-radio-button" type="radio" id="Mirosoft-Edge" name="browser" value="Mirosoft Edge">
        <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
    </div><!--End null-margin-bottom-20-->
</div><!--End null-display-flex-->

</form>

Add the below HTML code to have title for radio buttons:

<div class="null-color-main null-font-weight-bold null-margin-bottom-10">Title</div>

<form method="get" action="/">

<div class="null-color-main null-font-weight-bold null-margin-bottom-10">Browser Type:</div>
            
<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-radio-button" type="radio" id="Google-Chrome" name="browser" value="Google Chrome">
     <label class="null-cursor-pointer" for="Google-Chrome"> Google Chrome</label><br>
</div><!--End null-margin-bottom-20-->

<div class="null-margin-bottom-20 null-display-flex null-align-items-center null-gap-10">
     <input class="null-form-radio-button" type="radio" id="Mirosoft-Edge" name="browser" value="Mirosoft Edge">
     <label class="null-cursor-pointer" for="Mirosoft-Edge"> Mirosoft Edge</label><br>
</div><!--End null-margin-bottom-20-->

</form>

<script>
// Get all radio buttons
// You can target input[type="radio"] or class .null-form-radio-button
const radioButtons = document.querySelectorAll('input[type="radio"]');

// Store the currently selected value
let selectedValue = null;

// Add event listener to each radio button
radioButtons.forEach(radioButton => {
  radioButton.addEventListener('click', function() {
    // Check if the same radio button is clicked again
    if (selectedValue === this.value) {
      // Deselect the radio button by removing its value
      this.checked = false;
      selectedValue = null;
    } else {
      // Store the selected value
      selectedValue = this.value;
    }
  });
});
</script>