How can I have an input group?

Question

I am working on a project to create hospital software. I need to create a form with a rectangle to select a group, like in the design. I couldn't figure out how to do that. How can I achieve this, please?

here is my code:

<form>
      <label>Groupe</label>
      <ul>
        <li><input type="radio" name="group" id="">Groupe 1</li>
        <li><input type="radio" name="group" id="">Groupe 2</li>
        <li><input type="radio" name="group" id="">Groupe 3</li>
      </ul>
      <label>Place trouvée</label>
      <input type="checkbox" name="place_trouvee"><br>
      <label>Date et heure prévue de mutation</label>
      <input type="datetime" name="date_heure_mutation" placeholder="jj/mm/aaaa --:--"><br>
      <label>Mobilité</label>
      <select name="mobilité">
        <option value="" selected disabled>-- sélectionner une option --</option>
      </select><br><br>
      <button type="reset">Réinitialiser</button>
      <button type="submit">Enregistrer et fermer</button>
  </form>

here is my design

Answer 1

You can achieve it by using Bootstrap 5, combining this https://getbootstrap.com/docs/5.0/forms/checks-radios/#outlined-styles with this https://getbootstrap.com/docs/5.0/components/button-group/#mixed-styles

or using vanilla

input[type="radio"] {
    display: none;
}

/* Styling label as buttons */
.radio-group label {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f0f0f0;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

/* Changing label style on hover */
.radio-group label:hover {
    background-color: #ddd;
}

/* Styling for selected label */
input[type="radio"]:checked + label {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

<div class="radio-group">
    <input type="radio" id="option1" name="options" checked>
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" name="options">
    <label for="option2">Option 2</label>

    <input type="radio" id="option3" name="options">
    <label for="option3">Option 3</label>
</div>