Chip selectable check

Chip selectable check: a CSS button. Copy the rules, or the prompt that rebuilds it.

chippilltogglesmallcheckbox-driven

Remote

CSS

.btn-163 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 13px/1 system-ui,sans-serif;
  color: #374151;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  user-select: none;
  transition: background .15s,border-color .15s,color .15s
}
.btn-163 input {
  appearance: none;
  width: 0;
  height: 0;
  margin: 0
}
.btn-163::before {
  content: "";
  width: 0;
  height: 12px;
  border-radius: 2px;
  transition: width .15s
}
.btn-163:hover {
  border-color: #a7f3d0;
  background: #ecfdf5
}
.btn-163:has(input:checked) {
  background: #059669;
  border-color: #059669;
  color: #fff
}
.btn-163:has(input:checked)::before {
  content: "\2713";
  width: 12px;
  font-size: 11px;
  line-height: 12px
}
.btn-163:has(input:focus-visible) {
  outline: 2px solid #059669;
  outline-offset: 2px
}
.btn-163:active {
  transform: scale(.97)
}

HTML

<label class="btn-163"><input type="checkbox">Remote</label>

Prompt

A selectable chip built as a label around a hidden checkbox: grey #f9fafb pill with 1px #e5e7eb border, #374151 13px medium text, 7px by 14px padding. Hover tints it mint. When checked (via :has) it fills green #059669 with white text and a check mark (unicode 2713) slides in before the label. Focus on the hidden input shows a 2px green outline on the chip; active scales 0.97.

Chip selectable check

Same shelf