Tag Editor

Adds/removes tags.

html

<fieldset class="tageditor tageditor--solid" style="--accent:#E8A020;">
  <legend class="tageditor__legend"><label for="tageditor-input">Tags</label></legend>
  <div class="tageditor__row">
    <span class="tageditor__tag">Design<button type="button" class="tageditor__x" aria-label="Remove tag: Design">&times;</button></span>
    <span class="tageditor__tag">Frontend<button type="button" class="tageditor__x" aria-label="Remove tag: Frontend">&times;</button></span>
    <span class="tageditor__tag">Urgent<button type="button" class="tageditor__x" aria-label="Remove tag: Urgent">&times;</button></span>
    <span class="tageditor__tag">Backlog<button type="button" class="tageditor__x" aria-label="Remove tag: Backlog">&times;</button></span>
    <input id="tageditor-input" type="text" class="tageditor__input" placeholder="Add a tag…">
  </div>
  <p class="tageditor__help">Up to 8 tags</p>
</fieldset>
<style>
.tageditor { font: 14px system-ui, sans-serif; color: #241430; max-width: 320px; border: none; padding: 0; margin: 0; }
.tageditor__legend { padding: 0; margin-bottom: 6px; font-weight: 500; }
.tageditor__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1.5px solid #24143040; border-radius: 8px; background: #FAF7F2; }
.tageditor__row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.tageditor__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; }
.tageditor--solid .tageditor__tag { background: var(--accent); color: #241430; }
.tageditor--outline .tageditor__tag { background: transparent; border: 1.5px solid var(--accent); color: #241430; }
.tageditor--soft .tageditor__tag { background: color-mix(in srgb, var(--accent) 25%, #FAF7F2); color: #241430; }
.tageditor__x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: none; border-radius: 50%; background: #24143020; color: #241430; cursor: pointer; padding: 0; line-height: 1; font-size: 12px; }
.tageditor__x:hover { background: #24143040; }
.tageditor__x:focus-visible { outline: 2px solid #241430; outline-offset: 1px; }
.tageditor__input { flex: 1; min-width: 90px; border: none; outline: none; background: transparent; font: inherit; color: #241430; padding: 4px; }
.tageditor__help { margin: 6px 0 0; font-size: 12.5px; color: #24143099; }
</style>

tailwind

<fieldset class="tag-tw--solid font-sans text-sm text-[#241430] max-w-[320px] border-0 p-0 m-0">
  <legend class="p-0 mb-1.5 font-medium"><label for="tageditor-input-tw">Tags</label></legend>
  <div class="flex flex-wrap gap-1.5 items-center p-2 border-[1.5px] border-[#24143040] rounded-lg bg-[#FAF7F2]">
    <span class="tag-chip-tw inline-flex items-center gap-1.5 py-1 pl-2.5 pr-1 rounded-full text-[13px] font-medium">Design<button type="button" class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#24143020] hover:bg-[#24143040] cursor-pointer p-0" aria-label="Remove tag: Design">&times;</button></span>
    <span class="tag-chip-tw inline-flex items-center gap-1.5 py-1 pl-2.5 pr-1 rounded-full text-[13px] font-medium">Frontend<button type="button" class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#24143020] hover:bg-[#24143040] cursor-pointer p-0" aria-label="Remove tag: Frontend">&times;</button></span>
    <span class="tag-chip-tw inline-flex items-center gap-1.5 py-1 pl-2.5 pr-1 rounded-full text-[13px] font-medium">Urgent<button type="button" class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#24143020] hover:bg-[#24143040] cursor-pointer p-0" aria-label="Remove tag: Urgent">&times;</button></span>
    <span class="tag-chip-tw inline-flex items-center gap-1.5 py-1 pl-2.5 pr-1 rounded-full text-[13px] font-medium">Backlog<button type="button" class="inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#24143020] hover:bg-[#24143040] cursor-pointer p-0" aria-label="Remove tag: Backlog">&times;</button></span>
    <input id="tageditor-input-tw" type="text" class="flex-1 min-w-[90px] border-0 outline-none bg-transparent p-1" placeholder="Add a tag…">
  </div>
  <p class="mt-1.5 text-xs text-[#24143099]">Up to 8 tags</p>
</fieldset>
<style>
.tag-tw--solid .tag-chip-tw { background: #E8A020; color: #241430; }
.tag-tw--outline .tag-chip-tw { background: transparent; border: 1.5px solid #E8A020; color: #241430; }
.tag-tw--soft .tag-chip-tw { background: color-mix(in srgb, #E8A020 25%, #FAF7F2); color: #241430; }
</style>

react

export function TagEditor({
  label = "Tags",
  tagStyle = "solid",
  extraTag = true,
  maxTags = 8,
  accent = "#E8A020",
}) {
  const tags = ["Design", "Frontend", "Urgent", ...(extraTag ? ["Backlog"] : [])];
  const chipStyle = {
    solid: { background: accent, border: "none" },
    outline: { background: "transparent", border: `1.5px solid ${accent}` },
    soft: { background: `color-mix(in srgb, ${accent} 25%, #FAF7F2)`, border: "none" },
  }[tagStyle] ?? { background: accent, border: "none" };
  return (
    <fieldset style={{ font: "14px system-ui, sans-serif", color: "#241430", maxWidth: 320, border: "none", padding: 0, margin: 0 }}>
      <legend style={{ padding: 0, marginBottom: 6, fontWeight: 500 }}>
        <label htmlFor="tageditor-input-r">{label}</label>
      </legend>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center", padding: 8, border: "1.5px solid #24143040", borderRadius: 8, background: "#FAF7F2" }}>
        {tags.map((tag) => (
          <span key={tag} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 6px 4px 10px", borderRadius: 999, fontSize: 13, fontWeight: 500, color: "#241430", ...chipStyle }}>
            {tag}
            <button type="button" aria-label={`Remove tag: ${tag}`} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 16, height: 16, border: "none", borderRadius: "50%", background: "#24143020", cursor: "pointer", padding: 0, fontSize: 12 }}>&times;</button>
          </span>
        ))}
        <input type="text" placeholder="Add a tag…" style={{ flex: 1, minWidth: 90, border: "none", outline: "none", background: "transparent", font: "inherit", color: "#241430", padding: 4 }} />
      </div>
      <p style={{ margin: "6px 0 0", fontSize: 12.5, color: "#24143099" }}>Up to {maxTags} tags</p>
    </fieldset>
  );
}