Components

Radio

One choice from a small set where the options exclude each other.

Use it when seeing all the options at once matters, and there are few enough to show.

Watch out. Beyond about five options a Select is kinder. Radios cannot be cleared once set, so include an explicit 'none' if that is a valid answer.

Sub-brand

Theme

Liverendered from the shipped recipe

States

unchecked

hover

selected

error

disabled

Code

The HTML for the live example above is on the page - use your browser's inspector, or copy the CSS here and the markup from the preview. Load post-ui.css once per site and this component works anywhere.

/* ============================================================================
   POST UI System — components
   HAND-WRITTEN. Not generated: this file encodes the RULES the components follow,
   which is not the same thing as whatever the Figma canvas currently looks like.
   The contract it implements (variant axes + reasoning) is synced in components.json.

   Import order:  tokens.css  ->  type.css  ->  components.css

   NAMING. Every class is `post-` prefixed. This ships into Webflow projects where
   `.button`, `.field`, `.label` or `.text-body` are exactly the classes a site
   already has, and an unprefixed collision would silently restyle real content.
   Block `post-x` · modifier `post-x--y` · state `is-*`.

   THE FOUR RULES EVERYTHING BELOW OBEYS
   1. Tokens are named by scale, never by consumer — space/m, stroke/m, icon-size/m
      and text/md all mean "the middle step".
   2. Strokes are altitude, not component — s detail · m component · l section.
   3. Optical padding — outer padding is uniform, the LABEL carries space/xs left and
      right, and the gap is 0. Text ends up inset by outer+xs while an icon sits at
      outer, which is correct: a glyph carries internal whitespace and text does not.
      One recipe covers icon-left, icon-right, both, or neither.
   4. Control height comes from the ICON TIER, never from text. Every control label
      carries min-height = its icon-size token. Without it the icon becomes the
      tallest child and toggling an optional icon grows the control — a chip jumped
      28 -> 32px exactly this way. With it, toggling an icon changes width only.

   currentColor is load-bearing. Outline/ghost controls bind their label fill AND
   their stroke to the same `action` token, so the border is written as
   `border-color: currentColor` and one colour change moves both.
   ============================================================================ */

/* ---- radio ---- */
/* Inherently ROUND — documented alongside the icon-button circle as the two
   sanctioned exceptions to sharp corners. A square radio would read as a checkbox. */
.post-radio { display: inline-flex; align-items: flex-start; gap: var(--space-s); cursor: pointer; }
.post-radio__ring {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size-s);
  height: var(--icon-size-s);
  border: var(--stroke-m) solid var(--border);
  border-radius: 50%;
  background: var(--surface);
}
.post-radio__dot { width: 50%; height: 50%; border-radius: 50%; background: transparent; }
.post-radio__label {
  font-family: var(--font-post);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--icon-size-s);
  color: var(--text);
}
.post-radio:hover .post-radio__ring,
.post-radio.is-hover .post-radio__ring { background: var(--hover-surface); border-color: var(--hover-ink); }
/* Selected keeps the RING in the action colour and fills the dot — it does not invert
   the whole control, which would read as a checkbox. */
.post-radio.is-selected .post-radio__ring { border-color: var(--action); }
.post-radio.is-selected .post-radio__dot { background: var(--action); }
.post-radio.is-error .post-radio__ring { border-color: var(--feedback-error-text); background: var(--feedback-error-surface); }
.post-radio.is-disabled { opacity: 0.4; cursor: not-allowed; }
.post-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.post-radio input:focus-visible + .post-radio__ring { outline: 2px solid var(--action); outline-offset: 2px; }