Quick Edit

Lightweight editing interaction.

html

<div class="qe-demo" style="--accent:#E8A020;">
  <div class="qe-demo__row">
    <span class="qe-demo__field">Due date</span>
    <button type="button" class="qe-demo__chip is-active">Aug 22 <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M16 3l5 5-11 11H5v-5z" /></svg></button>
  </div>
  
  <div class="qe-demo__popover">
    <input class="qe-demo__input" type="text" value="Aug 22" />
    <button type="button" class="qe-demo__done">Done</button>
  </div>
  
</div>
<style>
.qe-demo { width: 260px; font: 14px system-ui, sans-serif; color: #241430; position: relative; }
.qe-demo__row { display: flex; align-items: center; justify-content: space-between; }
.qe-demo__field { color: #241430aa; font-size: 13px; }
.qe-demo__chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid transparent; background: #24143010; border-radius: 999px; padding: 5px 12px; font: inherit; cursor: pointer; }
.qe-demo__chip.is-active { border-color: var(--accent); background: #FAF7F2; }
.qe-demo__chip svg { opacity: .6; }
.qe-demo__popover { margin-top: 8px; padding: 10px; border-radius: 10px; background: #FAF7F2; border: 1.5px solid var(--accent); box-shadow: 0 10px 22px rgba(36,20,48,.16); display: flex; gap: 6px; }
.qe-demo__input { flex: 1; padding: 7px 9px; border-radius: 6px; border: 1.5px solid #24143033; font: inherit; }
.qe-demo__done { background: var(--accent); border: none; border-radius: 6px; padding: 6px 12px; font-weight: 600; cursor: pointer; }
</style>

tailwind

<div class="relative" style="width:260px;font-family:system-ui,sans-serif;color:#241430">
  <div class="flex items-center justify-between">
    <span class="text-[13px] text-[#241430aa]">Due date</span>
    <button type="button" class="qe-tw is-active inline-flex items-center gap-1.5 border-[1.5px] border-transparent rounded-full px-3 py-1.5 bg-[#24143010] cursor-pointer">Aug 22 <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M16 3l5 5-11 11H5v-5z" /></svg></button>
  </div>
  
  <div class="mt-2 p-2.5 rounded-[10px] flex gap-1.5" style="background:#FAF7F2;border:1.5px solid #E8A020;box-shadow:0 10px 22px rgba(36,20,48,.16)">
    <input type="text" value="Aug 22" class="flex-1 px-2 py-1.5 rounded-md border-[1.5px]" style="border-color:#24143033" />
    <button type="button" class="rounded-md px-3 py-1.5 font-semibold border-0 cursor-pointer" style="background:#E8A020">Done</button>
  </div>
  
</div>
<style>
.qe-tw.is-active { border-color: #E8A020; background: #FAF7F2; }
</style>

react

import { useState } from "react";

export function QuickEdit({
  fieldLabel = "Due date",
  value: initialValue = "Aug 22",
  open: initialOpen = true,
  accent = "#E8A020",
}) {
  const [open, setOpen] = useState(initialOpen);
  const [value, setValue] = useState(initialValue);
  return (
    <div style={{ width: 260, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", position: "relative" }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 13, color: "#241430aa" }}>{fieldLabel}</span>
        <button type="button" onClick={() => setOpen((o) => !o)} style={{ display: "inline-flex", alignItems: "center", gap: 6, border: "1.5px solid " + (open ? accent : "transparent"), background: open ? "#FAF7F2" : "#24143010", borderRadius: 999, padding: "5px 12px", cursor: "pointer" }}>
          {value} <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true"><path d="M16 3l5 5-11 11H5v-5z" /></svg>
        </button>
      </div>
      {open && (
        <div style={{ marginTop: 8, padding: 10, borderRadius: 10, background: "#FAF7F2", border: "1.5px solid " + accent, boxShadow: "0 10px 22px rgba(36,20,48,.16)", display: "flex", gap: 6 }}>
          <input type="text" value={value} onChange={(e) => setValue(e.target.value)} style={{ flex: 1, padding: "7px 9px", borderRadius: 6, border: "1.5px solid #24143033", font: "inherit" }} />
          <button type="button" onClick={() => setOpen(false)} style={{ background: accent, border: "none", borderRadius: 6, padding: "6px 12px", fontWeight: 600, cursor: "pointer" }}>Done</button>
        </div>
      )}
    </div>
  );
}