Checkbox & Radio

Recipe CSS

This is the exact CSS your kit ships for Checkbox & Radio — token-driven, so it re-themes with every knob. Get it (and the rest) from the configurator's Use kit panel.

/* === Radio card — a selectable option card (radio + body + trailing meta) ==
 * Generic: delivery options, plan tiers, payment methods, shipping speeds…
 * Reuses the system .radio for the dot. Selected = kit selection convention:
 * SOFT solid brand fill + brand border. */
.radio-cards { display: flex; flex-direction: column; gap: var(--k-stack-gap, 8px); }
.radio-card {
  display: flex; align-items: center; gap: var(--k-s-12); padding: var(--k-space, 16px);
  border: var(--k-bw, 1px) solid var(--k-border); border-radius: var(--k-radius-md);
  cursor: pointer; transition: border-color var(--k-dur-fast,110ms) var(--k-ease,ease),
    background var(--k-dur-fast,110ms) var(--k-ease,ease);
}
.radio-card:hover:not(.radio-card--on) { border-color: var(--k-state-border); }
/* The radio input is visually hidden inside the card — surface its keyboard focus
 * on the card itself (inset ring, mirrors .swatch-picker__opt). */
.radio-card:has(input:focus-visible) { outline: var(--k-ring-w, 2px) solid var(--k-ring); outline-offset: -2px; }
.radio-card--on { border-color: var(--k-ring); background: var(--k-primary-soft); }
.radio-card > .radio { flex: none; }
.radio-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.radio-card__title { font-size: var(--k-type-body); font-weight: var(--k-weight-semibold); color: var(--k-fg); }
.radio-card__desc { font-size: var(--k-type-small); color: var(--k-fg-muted); margin-top: var(--k-s-2); line-height: 1.4; }
.radio-card__meta { font-size: var(--k-type-small); font-weight: var(--k-weight-bold); color: var(--k-fg); white-space: nowrap; }

/* ----- Slot picker (.slotpicker / .slot) -----
 * A grid of selectable time/option pills — booking & scheduling screens.
 * Selection follows the kit convention: soft brand fill + ring border. */
.slotpicker { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: var(--k-stack-gap, 8px); }
.slot {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--k-row-h-md, 38px); padding: 0 var(--k-s-10);
  border: var(--k-bw, 1px) solid var(--k-border); border-radius: var(--k-radius-md);
  background: var(--k-surface); color: var(--k-fg);
  font-size: var(--k-type-small); font-weight: var(--k-weight-medium); cursor: pointer;
  transition: background var(--k-dur-fast, 140ms) var(--k-ease, ease), border-color var(--k-dur-fast, 140ms) var(--k-ease, ease);
}
.slot:hover { border-color: var(--k-ring); background: var(--k-state-hover); }
.slot--on { background: var(--k-primary-soft); border-color: var(--k-ring); color: var(--k-primary-soft-fg); font-weight: var(--k-weight-semibold); }
.slot--off { opacity: 0.4; pointer-events: none; text-decoration: line-through; }

/* === Colour picker (Tailwind radio-group "color picker") =================
 * A radio group rendered as colour swatches — pick a colour; the selected one
 * gets a ring in its own colour. Each .swatch-picker__opt wraps a visually-hidden
 * radio <input>; set the swatch colour via the --sw custom property. */
.swatch-picker { display: flex; flex-wrap: wrap; gap: var(--k-s-10); }
.swatch-picker__opt {
  position: relative; display: inline-grid; place-items: center;
  width: 1.75rem; height: 1.75rem; border-radius: var(--k-radius-pill);
  background: var(--sw, var(--k-primary)); cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--k-border);
}
.swatch-picker__opt > input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.swatch-picker__opt:has(input:checked) { outline: 2px solid var(--sw, var(--k-fg)); outline-offset: 2px; }
.swatch-picker__opt:has(input:focus-visible) { outline: 2px solid var(--k-ring); outline-offset: 2px; }