# Chip seleccionable (B 163)

Categoría: Botones  
Etiquetas: chip, pill, toggle, small, checkbox-driven  
Página: https://designforai.dev/es/snippet/btn-163

## Prompt

Un chip seleccionable construido como label alrededor de un checkbox oculto: píldora gris #f9fafb con borde 1px #e5e7eb, texto #374151 13px medium, padding 7px por 14px. En hover se tiñe de menta. Al marcarse (vía :has) se rellena de verde #059669 con texto blanco y una marca de verificación (unicode 2713) entra deslizándose antes de la etiqueta. El focus del input oculto muestra un outline verde de 2px en el chip; active escala 0.97.

## HTML

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

## CSS

```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)
}
```