Brown Markup Library

<div class"container">
    <input
        class="input"
        id="this-checkbox"
        name="this-checkbox"
        type="checkbox"
    />
    <label class="label" for="this-checkbox">
        Best Input Ever
    </label>
</div>

.container {
  display: flex;
  height: 24px;
  position: relative;
  visibility: visible;
}
.input {
  display: block;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}
.input:checked + .label:before {
  background-color: var(--red);
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3px'><polyline points='20 6 9 17 4 12' /></svg>");
}
.input:focus + .label:before {
  outline: 1px solid blue;
}
.label {
  align-items: center;
  align-self: center;
  color: var(--darkGray);
  display: flex;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.0625rem;
  margin-left: 0;
  position: relative;
  text-transform: uppercase;
}
.label:before {
  background-color: var(--white);
  border: 1px solid var(--red);
  content: "";
  height: 20px;
  margin-right: 10px;
  width: 20px;
}
.label[data-disabled="true"] {
  opacity: 0.8;
}
.label[data-disabled="true"]:before {
  opacity: 0.8;
}