legend

Caption for a fieldset.

html

<fieldset class="lg" style="--accent:#E8A020;">
  <legend class="lg__legend lg__legend--inline lg__legend--bold">Notification preferences</legend>
  <label class="lg__opt"><input type="checkbox" checked> Email</label>
  <label class="lg__opt"><input type="checkbox"> SMS</label>
</fieldset>
<style>
.lg { width: 280px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143025; border-radius: 10px; padding: 8px 18px 16px; }
.lg__legend { color: var(--accent); font-weight: 500; }
.lg__legend--inline { padding: 0 6px; font-size: 13px; }
.lg__legend--block { display: block; width: 100%; padding: 6px 0 10px; font-size: 15px; border-bottom: 1px solid #24143020; margin-bottom: 6px; }
.lg__legend--bold { font-weight: 800; }
.lg__opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; }
.lg__opt input { accent-color: var(--accent); width: 16px; height: 16px; }
</style>

tailwind

<fieldset class="w-[280px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143025] rounded-[10px] px-[18px] pt-2 pb-4">
  <legend class="lg-tw-legend lg-tw-legend--inline font-medium font-extrabold" style="color:#E8A020">Notification preferences</legend>
  <label class="flex items-center gap-2 py-1.5 text-sm"><input type="checkbox" class="w-4 h-4" style="accent-color:#E8A020" checked> Email</label>
  <label class="flex items-center gap-2 py-1.5 text-sm"><input type="checkbox" class="w-4 h-4" style="accent-color:#E8A020"> SMS</label>
</fieldset>
<style>
.lg-tw-legend--inline { padding: 0 6px; font-size: 13px; }
.lg-tw-legend--block { display: block; width: 100%; padding: 6px 0 10px; font-size: 15px; border-bottom: 1px solid #24143020; margin-bottom: 6px; }
</style>

react

export function LegendElement({
  legendText = "Notification preferences",
  position = "inline",
  accent = "#E8A020",
  bold = true,
}) {
  const style = position === "block"
    ? { display: "block", width: "100%", padding: "6px 0 10px", fontSize: 15, borderBottom: "1px solid #24143020", marginBottom: 6 }
    : { padding: "0 6px", fontSize: 13 };
  return (
    <fieldset style={{ width: 280, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143025", borderRadius: 10, padding: "8px 18px 16px" }}>
      <legend style={{ color: accent, fontWeight: bold ? 800 : 500, ...style }}>{legendText}</legend>
      <label style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}><input type="checkbox" style={{ accentColor: accent, width: 16, height: 16 }} defaultChecked /> Email</label>
      <label style={{ display: "flex", alignItems: "center", gap: 8, padding: "6px 0", fontSize: 14 }}><input type="checkbox" style={{ accentColor: accent, width: 16, height: 16 }} /> SMS</label>
    </fieldset>
  );
}