File Upload

File selection/upload control.

html

<div class="fu">
  <span class="fu__label" id="fu-label-1">Attach resume</span>
  <label class="fu__btn" style="--accent:#A8E6C1;" for="fu-1">
    Choose file
    <input class="fu__input" id="fu-1" type="file" accept=".pdf,.doc,.docx" aria-labelledby="fu-label-1">
  </label>
  <span class="fu__hint">.pdf,.doc,.docx</span>
</div>
<style>
.fu { font: 14px system-ui, sans-serif; color: #241430; max-width: 260px; }
.fu__label { display: block; margin-bottom: 6px; font-weight: 500; }
.fu__btn { display: inline-block; padding: 9px 16px; border-radius: 999px; background: var(--accent); color: #241430; font-weight: 600; cursor: pointer; }
.fu__btn:hover { filter: brightness(0.95); }
.fu__btn:focus-within { outline: 2px solid #241430; outline-offset: 2px; }
.fu__input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.fu__hint { display: block; margin-top: 6px; font-size: 11px; color: #24143080; }
</style>

tailwind

<div class="font-sans text-sm text-[#241430] max-w-[260px]">
  <span class="block mb-1.5 font-medium" id="fu-tw-label-1">Attach resume</span>
  <label class="inline-block px-4 py-2.5 rounded-full font-semibold cursor-pointer hover:brightness-95 focus-within:outline focus-within:outline-2 focus-within:outline-[#241430] focus-within:outline-offset-2" style="background:#A8E6C1;">
    Choose file
    <input type="file" accept=".pdf,.doc,.docx" aria-labelledby="fu-tw-label-1" class="sr-only">
  </label>
  <span class="block mt-1.5 text-[11px] text-[#24143080]">.pdf,.doc,.docx</span>
</div>

react

export function FileUpload({
  label = "Attach resume",
  buttonText = "Choose file",
  accept = ".pdf,.doc,.docx",
  multiple = false,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 260 }}>
      <span id="fu-react-label-1" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</span>
      <label style={{ display: "inline-block", padding: "9px 16px", borderRadius: 999, background: accent, color: "#241430", fontWeight: 600, cursor: "pointer" }}>
        {buttonText}
        <input type="file" accept={accept} multiple={multiple} aria-labelledby="fu-react-label-1" style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", opacity: 0 }} />
      </label>
      <span style={{ display: "block", marginTop: 6, fontSize: 11, color: "#24143080" }}>{accept}</span>
    </div>
  );
}