# Segmentado triplo (B 098)

Categoria: Botões  
Tags: group, segmented, radio, three-options  
Página: https://designforai.dev/pt/snippet/btn-098

## Prompt

Um controle segmentado de três opções (Day / Week / Month) feito com inputs radio: uma trilha #f3f4f6 com borda de 1px #e5e7eb, raio de 8px, padding interno de 3px e gaps de 2px; cada rótulo tem 13px semibold cinza #6b7280 com padding de 8px por 14px e raio de 6px. A opção marcada ganha fundo branco, texto escuro e sombra 0 1px 2px. No hover o texto escurece; active #e5e7eb. Outline de foco de 2px escuro dentro do rótulo.

## HTML

```html
<div class="btn-098"><input type="radio" name="b098" id="b098a" checked><label for="b098a">Day</label><input type="radio" name="b098" id="b098b"><label for="b098b">Week</label><input type="radio" name="b098" id="b098c"><label for="b098c">Month</label></div>
```

## CSS

```css
.btn-098 {
  display: inline-flex;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 3px;
  gap: 2px
}
.btn-098 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}
.btn-098 label {
  font: 600 13px/1 system-ui,sans-serif;
  color: #6b7280;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s,color .15s,box-shadow .15s
}
.btn-098 label:hover {
  color: #111827
}
.btn-098 input:checked+label {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,.12)
}
.btn-098 input:focus-visible+label {
  outline: 2px solid #111827;
  outline-offset: -2px
}
.btn-098 label:active {
  background: #e5e7eb
}
```