label

Accessible label for a form control.

html

<div class="lbl-demo" data-control="input" style="--accent:#A8E6C1;">
  <div class="lbl-demo__row lbl-demo__row--input">
    <label class="lbl" for="lbl-el-input">Email address</label>
    <input class="lbl-input" id="lbl-el-input" type="text">
  </div>
  <div class="lbl-demo__row lbl-demo__row--checkbox">
    <label class="lbl lbl--check"><input class="lbl-check" type="checkbox"> Email address</label>
  </div>
  <p class="lbl-demo__hint">Click the label text itself — it focuses the paired control, no JavaScript required.</p>
</div>
<style>
.lbl-demo { width: 300px; box-sizing: border-box; font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; }
.lbl-demo__row { display: none; }
.lbl-demo[data-control="input"] .lbl-demo__row--input { display: block; }
.lbl-demo[data-control="checkbox"] .lbl-demo__row--checkbox { display: block; }
.lbl { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; cursor: pointer; }
.lbl--check { display: flex; align-items: center; gap: 8px; margin: 0; }
.lbl-input { width: 100%; box-sizing: border-box; font: 14px system-ui, sans-serif; padding: 9px 11px; border-radius: 7px; border: 1.5px solid #24143035; }
.lbl-input:focus-visible { outline: 2px solid var(--accent); }
.lbl-check { width: 17px; height: 17px; accent-color: var(--accent); }
</style>

tailwind

<div class="lbl-tw-demo w-[300px] box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] p-[18px] rounded-xl" data-control="input">
  <div class="lbl-tw-row lbl-tw-row--input">
    <label for="lbl-tw-input" class="block font-semibold text-[13px] mb-1.5 cursor-pointer">Email address</label>
    <input id="lbl-tw-input" type="text" class="w-full box-border text-sm px-2.5 py-2 rounded-md border-[1.5px] border-[#24143035] focus-visible:outline focus-visible:outline-2" style="outline-color:#A8E6C1">
  </div>
  <div class="lbl-tw-row lbl-tw-row--checkbox">
    <label class="flex items-center gap-2 font-semibold text-[13px] cursor-pointer"><input type="checkbox" class="w-[17px] h-[17px]" style="accent-color:#A8E6C1"> Email address</label>
  </div>
  <p class="m-0 mt-2 text-xs text-[#241430]/60">Click the label text itself — it focuses the paired control, no JavaScript required.</p>
</div>
<style>
.lbl-tw-row { display: none; }
.lbl-tw-demo[data-control="input"] .lbl-tw-row--input { display: block; }
.lbl-tw-demo[data-control="checkbox"] .lbl-tw-row--checkbox { display: block; }
</style>

react

export function LabelElement({
  text = "Email address",
  control = "input",
  accent = "#A8E6C1",
  showHint = true,
}) {
  return (
    <div style={{ width: 300, boxSizing: "border-box", font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12 }}>
      {control === "checkbox" ? (
        <label style={{ display: "flex", alignItems: "center", gap: 8, fontWeight: 600, fontSize: 13, cursor: "pointer" }}>
          <input type="checkbox" style={{ width: 17, height: 17, accentColor: accent }} /> {text}
        </label>
      ) : (
        <div>
          <label htmlFor="lbl-r-input" style={{ display: "block", fontWeight: 600, fontSize: 13, marginBottom: 6, cursor: "pointer" }}>{text}</label>
          <input id="lbl-r-input" type="text" style={{ width: "100%", boxSizing: "border-box", font: "14px system-ui, sans-serif", padding: "9px 11px", borderRadius: 7, border: "1.5px solid #24143035" }} />
        </div>
      )}
      {showHint && <p style={{ margin: "8px 0 0", fontSize: 12, color: "#24143099" }}>Click the label text itself — it focuses the paired control, no JavaScript required.</p>}
    </div>
  );
}