File Picker

Selects a file.

html

<div class="fpick">
  <label class="fpick__btn" style="background:#A8E6C1;">
    Choose file
    <input type="file" class="fpick__input"  />
  </label>
  <p class="fpick__chosen">resume.pdf</p>
  <p class="fpick__hint">Accepted: <span data-accept="Any file">Any file</span></p>
</div>
<style>
.fpick { font: 13px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 280px; padding: 16px; border-radius: 10px; box-sizing: border-box; border: 1px solid #24143018; }
.fpick__btn { position: relative; display: inline-block; padding: 8px 16px; border-radius: 8px; font-weight: 700; color: #14351f; cursor: pointer; }
.fpick__btn:focus-within { outline: 2px solid #241430; outline-offset: 2px; }
.fpick__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fpick__chosen { margin: 10px 0 2px; font-weight: 600; }
.fpick__hint { margin: 0; font-size: 11px; color: #24143088; }
.fpick__hint span { font-weight: 700; text-transform: capitalize; }
</style>

tailwind

<div class="w-[280px] p-4 rounded-[10px] box-border border border-[#24143018] font-sans text-[13px] text-[#241430] bg-[#FAF7F2]">
  <label class="relative inline-block px-4 py-2 rounded-lg font-bold text-[#14351f] cursor-pointer focus-within:outline focus-within:outline-2" style="background:#A8E6C1">
    Choose file
    <input type="file" class="absolute w-px h-px overflow-hidden" style="clip:rect(0 0 0 0)"  />
  </label>
  <p class="mt-2.5 mb-0.5 font-semibold">resume.pdf</p>
  <p class="m-0 text-[11px] text-[#241430]/50">Accepted: <span class="font-bold capitalize" data-accept="Any file">Any file</span></p>
</div>

react

export function FilePicker({
  label = "Choose file",
  chosenFile = "resume.pdf",
  accept = "Any file",
  multiple = false,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ font: "13px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 280, padding: 16, borderRadius: 10, boxSizing: "border-box", border: "1px solid #24143018" }}>
      <label style={{ position: "relative", display: "inline-block", padding: "8px 16px", borderRadius: 8, fontWeight: 700, color: "#14351f", cursor: "pointer", background: accent }}>
        {label}
        <input type="file" multiple={multiple} style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }} />
      </label>
      <p style={{ margin: "10px 0 2px", fontWeight: 600 }}>{chosenFile}</p>
      <p style={{ margin: 0, fontSize: 11, color: "#24143088" }}>Accepted: <span style={{ fontWeight: 700, textTransform: "capitalize" }}>{accept}</span></p>
    </div>
  );
}