Radio i checkbox jako button

Sprawdź najnowszą wersję komponentu toggle button zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Standardowe elementy checkbox i radio nie są zbyt atrakcyjne wizualnie. Oczywiście istnieje wiele bibliotek, które zmieniają ich wygląd, dodają animacje podczas kliknięcia itp. Ale tutaj skupiamy się na samym Bootstrapie, więc zajmiemy się elementem przygotowanym przez jego twórców a mianowicie checkboxem lub radio wyglądającym jak bootstrapowy przycisk a właściwie grupa przycisków.

Checkbox jako button

Zaczniemy od grupy buttonów, które są checkboxami. Naszym „wrapperem” czyli elementem skupiającym będzie div z klasą .btn-group .btn-group-toggle oraz atrybutem data-toggle="buttons". Wewnątrz umieszczamy najpierw element <label> z klasami .btn oraz .btn-*. Kolory a właściwie klasy buttonów opisane są w tym wpisie. Natomiast wewnątrz powyższego elementu umieszczamy sam checkbox czyli <input type="checkbox" autocomplete="off"> Nazwa opcji. Gdy chcemy by był on domyślnie zaznaczony musimy dodać mu atrybut checked. Label w połączeniu z input kopiujemy tyle razy ile checkboxów chcemy mieć. Całość wygląda następująco:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" checked autocomplete="off"> Checkbox 1 (domyślnie zaznaczony)
  </label>
  <label class="btn btn-success">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-warning">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
  <label class="btn btn-danger">
    <input type="checkbox" autocomplete="off"> Checkbox 4
  </label>
</div>

Radio jako button

Elementy radio tworzymy analogicznie do elementów checkbox. Różnica polega na zamianie typu input na radio.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (domyślnie zaznaczony)
  </label>
  <label class="btn btn-success">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-warning">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
  <label class="btn btn-danger">
    <input type="radio" name="options" id="option4" autocomplete="off"> Radio 4
  </label>
</div>