JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<input type="checkbox" class="facets-checkbox" id="school-facet-royal-docks-school-of-business-and-law" aria-controls="number-of-results">
<label for="school-facet-royal-docks-school-of-business-and-law">
  <span class="facet-item__value">Royal Docks School Of Business And Law</span>
</label>

CSS

/* Hide default checkbox */
.facets-checkbox {
  display: none;
}

/* Style the label to act as a custom checkbox container */
label {
  position: relative;
  padding-left: 30px; /* Space for the checkbox */
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  line-height: 24px;
}

/* Create the custom checkbox using ::before */
label::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-radius: 4px; /* Rounded corners for the checkbox */
  background-color: #fff;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Add the tick icon using Font Awesome when checked */
.facets-checkbox:checked + label::before {
  background-color: #55c3c8; /* Checked background color */
  border-color: #55c3c8; /* Match border color */
}

.facets-checkbox:checked + label::after {
  content: '\f00c'; /* Unicode for Font Awesome check icon */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; /* Ensure bold style for the icon */
  color: #000; /* Tick color */
  position: absolute;
  top: 50%;
  left: 5px; /* Adjust positioning inside the checkbox */
  transform: translateY(-50%);
  font-size: 14px; /* Adjust size of the tick icon */
}

/* Accessible focus-visible styling */
.facets-checkbox:focus-visible + label::before {
  outline: 2px solid #005aeb; /* Accessible focus outline */
  outline-offset: 4px;
}