# Selector de plan con radio (C 071)

Categoría: Tarjetas  
Etiquetas: has, radio, pricing, selectable, state, light  
Página: https://designforai.dev/es/snippet/card-071

## Prompt

Construye un selector de plan a dos columnas (340px, gap 12px) donde cada opción es un label que envuelve un radio oculto: blanca, borde 2px #e5e7eb, radio 14px, padding 16px, un nombre de plan 15px bold y un precio 13px #6b7280, con un círculo de radio falso (16px, anillo 2px #d1d5db) en la esquina superior derecha dibujado con un pseudoelemento. La opción "Yearly" lleva una píldora verde "Save 33%" (#dcfce7 / #15803d). Usando label:has(input:checked), la tarjeta seleccionada recibe un borde azul #2563eb, una sombra de anillo de focus azul translúcido de 4px, y su círculo de radio se convierte en un anillo azul grueso de 5px. El hover tiñe el borde de #bfdbfe.

## HTML

```html
<div class="card-071">
  <label><input type="radio" name="card-071" checked><b>Monthly</b><span>$12 / mo</span></label>
  <label><input type="radio" name="card-071"><b>Yearly</b><span>$96 / yr</span><i>Save 33%</i></label>
</div>
```

## CSS

```css
.card-071 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 340px;
  font-family: system-ui,sans-serif;
  color: #111827
}
.card-071 label {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s,box-shadow .15s
}
.card-071 input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0
}
.card-071 label::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 14px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #d1d5db;
  box-sizing: border-box;
  transition: border-color .15s,border-width .15s
}
.card-071 b {
  font-size: 15px
}
.card-071 span {
  font-size: 13px;
  color: #6b7280
}
.card-071 i {
  align-self: flex-start;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-style: normal;
  font-size: 11px;
  font-weight: 700
}
.card-071 label:hover {
  border-color: #bfdbfe
}
.card-071 label:has(input:checked) {
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37,99,235,.12)
}
.card-071 label:has(input:checked)::after {
  border-color: #2563eb;
  border-width: 5px
}
.card-071 label:has(input:focus-visible) {
  outline: 2px solid #2563eb;
  outline-offset: 2px
}
```