Design for AI

Chip selecionável com check

Chip selecionável com check: um botão em CSS. Copie as regras, ou o prompt que o reconstrói.

chippilltogglesmallcheckbox-driven

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

Um chip selecionável construído como um label ao redor de um checkbox oculto: pílula cinza #f9fafb com borda de 1px #e5e7eb, texto #374151 13px medium, padding 7px por 14px. No hover ganha um tom de menta. Quando marcado (via :has) preenche verde #059669 com texto branco e um sinal de check (unicode 2713) desliza para dentro antes do label. O focus no input oculto mostra um outline verde de 2px no chip; active escala 0.97.

Mesma prateleira