Label

Describes an input.

html

<div class="lbl lbl--top">
  <label class="lbl__text" for="lbl-1" style="--accent:#241430;">Shipping address <span class="lbl__req">*</span></label>
  <input class="lbl__input" id="lbl-1" type="text" required>
</div>
<style>
.lbl { font: 14px system-ui, sans-serif; color: #241430; max-width: 300px; display: flex; gap: 8px; }
.lbl--top { flex-direction: column; }
.lbl--left { flex-direction: row; align-items: center; }
.lbl__text { font-weight: 500; }
.lbl--left .lbl__text { flex: 0 0 120px; }
.lbl__req { color: var(--accent); }
.lbl__input { flex: 1; box-sizing: border-box; padding: 10px 12px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; border-radius: 8px; }
.lbl__input:focus-visible { outline: none; border-color: #241430; }
</style>

tailwind

<div class="lbl-tw lbl-tw--top font-sans text-sm text-[#241430] max-w-[300px] flex gap-2">
  <label class="font-medium" for="lbl-tw-1" style="color:#241430;">Shipping address <span>*</span></label>
  <input id="lbl-tw-1" type="text" required class="flex-1 box-border px-3 py-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143040] rounded-lg focus-visible:outline-none focus-visible:border-[#241430]">
</div>
<style>
.lbl-tw--top { flex-direction: column; }
.lbl-tw--left { flex-direction: row; align-items: center; }
.lbl-tw--left .lbl__text { flex: 0 0 120px; }
</style>

react

export function Label({
  text = "Shipping address",
  position = "top",
  accent = "#241430",
  required = true,
}) {
  return (
    <div style={{
      fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 300, display: "flex",
      flexDirection: position === "left" ? "row" : "column", alignItems: position === "left" ? "center" : "stretch", gap: 8,
    }}>
      <label htmlFor="lbl-react-1" style={{ fontWeight: 500, flex: position === "left" ? "0 0 120px" : undefined }}>
        {text}{required && <span style={{ color: accent }}> *</span>}
      </label>
      <input id="lbl-react-1" type="text" required={required} style={{
        flex: 1, boxSizing: "border-box", padding: "10px 12px", font: "inherit", color: "#241430",
        background: "#FAF7F2", border: "1.5px solid #24143040", borderRadius: 8,
      }} />
    </div>
  );
}