fieldset

Groups related form controls.

Delivery speed Standard (3–5 days) Express (next day)

html

<fieldset class="fs" style="--accent:#A8E6C1;">
  <legend class="fs__legend">Delivery speed</legend>
  <label class="fs__opt"><input type="radio" name="speed" checked> Standard (3–5 days)</label>
  <label class="fs__opt"><input type="radio" name="speed"> Express (next day)</label>
</fieldset>
<style>
.fs { width: 300px; box-sizing: border-box; font: 15px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143025; border-radius: 10px; padding: 16px 20px 18px; }
.fs:disabled, .fs[disabled] { opacity: .5; }
.fs__legend { padding: 0 6px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.fs__opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.fs__opt input { accent-color: var(--accent); width: 16px; height: 16px; }
</style>

tailwind

<fieldset class="w-[300px] box-border font-sans text-[15px] text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143025] rounded-[10px] px-5 pt-4 pb-[18px] disabled:opacity-50">
  <legend class="px-1.5 font-bold text-[13px] uppercase tracking-wide" style="color:#A8E6C1">Delivery speed</legend>
  <label class="flex items-center gap-2 py-1.5 text-sm"><input type="radio" name="speed" class="w-4 h-4" style="accent-color:#A8E6C1" checked> Standard (3–5 days)</label>
  <label class="flex items-center gap-2 py-1.5 text-sm"><input type="radio" name="speed" class="w-4 h-4" style="accent-color:#A8E6C1"> Express (next day)</label>
</fieldset>

react

export function FieldsetElement({
  legendText = "Delivery speed",
  inputType = "radio",
  accent = "#A8E6C1",
  disabled = false,
}) {
  return (
    <fieldset disabled={disabled} style={{ width: 300, boxSizing: "border-box", font: "15px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143025", borderRadius: 10, padding: "16px 20px 18px", opacity: disabled ? 0.5 : 1 }}>
      <legend style={{ padding: "0 6px", fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: "0.04em", color: accent }}>{legendText}</legend>
      <label style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}>
        <input type={inputType} name="speed" style={{ accentColor: accent, width: 16, height: 16 }} defaultChecked /> Standard (3–5 days)
      </label>
      <label style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}>
        <input type={inputType} name="speed" style={{ accentColor: accent, width: 16, height: 16 }} /> Express (next day)
      </label>
    </fieldset>
  );
}