# Chip auswählbar Haken (B 163)

Kategorie: Buttons  
Tags: chip, pill, toggle, small, checkbox-driven  
Seite: https://designforai.dev/de/snippet/btn-163

## Prompt

Ein auswählbarer Chip als Label um eine versteckte Checkbox: graue #f9fafb Pille mit 1px #e5e7eb Rahmen, #374151 13px medium Text, 7px mal 14px Padding. Hover tönt ihn mint. Wenn checked (über :has) füllt er sich grün #059669 mit weißem Text und ein Häkchen (Unicode 2713) gleitet vor das Label. Focus auf dem versteckten Input zeigt eine 2px grüne Outline auf dem Chip; Active skaliert auf 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)
}
```