Link Editor

Interface for creating and editing hyperlinks.

html

<div class="led led--popover" data-variant="popover" style="--accent:#BFD9F2;">
  <p class="led__eyebrow">Edit link</p>
  <label class="led__field">
    <span class="led__label">Text</span>
    <input class="led__input" type="text" value="Anthropic documentation" aria-label="Link text" />
  </label>
  <label class="led__field">
    <span class="led__label">URL</span>
    <input class="led__input" type="url" value="https://docs.anthropic.com" aria-label="Link URL" />
  </label>
  <label class="led__toggle">
    <input type="checkbox" checked />
    <span>Open in new tab</span>
  </label>
  <p class="led__preview">Preview: <a class="led__link" href="https://docs.anthropic.com" target="_blank" rel="noopener">Anthropic documentation</a></p>
</div>
<style>
.led { font-family: system-ui, sans-serif; color: #241430; background: #FAF7F2; max-width: 300px; padding: 18px; }
.led--popover { border-radius: 12px; box-shadow: 0 12px 28px rgba(36,20,48,.18); border: 1px solid #24143014; }
.led--inline { border-top: 3px solid var(--accent); border-radius: 0; box-shadow: none; }
.led__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.led__field { display: block; margin-bottom: 10px; font-size: 13px; }
.led__label { display: block; margin-bottom: 4px; color: #241430aa; }
.led__input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid #24143026; border-radius: 8px; font: inherit; }
.led__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.led__toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; }
.led__preview { margin: 0; font-size: 13px; border-top: 1px solid #24143014; padding-top: 10px; }
.led__link { color: var(--accent); font-weight: 600; }
</style>

tailwind

<div class="led-tw led-tw--popover max-w-[300px] p-[18px] bg-[#FAF7F2] text-[#241430] font-sans" data-variant="popover" style="--accent:#BFD9F2;">
  <p class="m-0 mb-2.5 text-xs font-bold uppercase tracking-wide" style="color:#BFD9F2">Edit link</p>
  <label class="block mb-2.5 text-[13px]">
    <span class="block mb-1 text-[#241430]/65">Text</span>
    <input type="text" value="Anthropic documentation" aria-label="Link text" class="w-full box-border px-2.5 py-2 border-[1.5px] border-[#24143026] rounded-lg font-sans" />
  </label>
  <label class="block mb-2.5 text-[13px]">
    <span class="block mb-1 text-[#241430]/65">URL</span>
    <input type="url" value="https://docs.anthropic.com" aria-label="Link URL" class="w-full box-border px-2.5 py-2 border-[1.5px] border-[#24143026] rounded-lg font-sans" />
  </label>
  <label class="flex items-center gap-2 text-[13px] mb-3">
    <input type="checkbox" checked />
    <span>Open in new tab</span>
  </label>
  <p class="m-0 text-[13px] border-t border-[#24143014] pt-2.5">Preview: <a href="https://docs.anthropic.com" target="_blank" rel="noopener" class="font-semibold" style="color:#BFD9F2">Anthropic documentation</a></p>
</div>
<style>
.led-tw--popover { border-radius: 12px; box-shadow: 0 12px 28px rgba(36,20,48,.18); border: 1px solid #24143014; }
.led-tw--inline { border-top: 3px solid #BFD9F2; border-radius: 0; box-shadow: none; }
</style>

react

import { useState } from "react";

export function LinkEditor({
  linkText = "Anthropic documentation",
  url = "https://docs.anthropic.com",
  openNewTab: initialOpenNewTab = true,
  accent = "#BFD9F2",
  variant = "popover",
}) {
  const [openNewTab, setOpenNewTab] = useState(initialOpenNewTab);
  const wrap = {
    popover: { borderRadius: 12, boxShadow: "0 12px 28px rgba(36,20,48,.18)", border: "1px solid #24143014" },
    inline: { borderTop: `3px solid ${accent}`, borderRadius: 0, boxShadow: "none" },
  }[variant] ?? {};
  return (
    <div style={{ fontFamily: "system-ui, sans-serif", color: "#241430", background: "#FAF7F2", maxWidth: 300, padding: 18, ...wrap }}>
      <p style={{ margin: "0 0 10px", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em", color: accent }}>Edit link</p>
      <label style={{ display: "block", marginBottom: 10, fontSize: 13 }}>
        <span style={{ display: "block", marginBottom: 4, color: "#241430aa" }}>Text</span>
        <input type="text" defaultValue={linkText} aria-label="Link text" style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", border: "1.5px solid #24143026", borderRadius: 8, font: "inherit" }} />
      </label>
      <label style={{ display: "block", marginBottom: 10, fontSize: 13 }}>
        <span style={{ display: "block", marginBottom: 4, color: "#241430aa" }}>URL</span>
        <input type="url" defaultValue={url} aria-label="Link URL" style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", border: "1.5px solid #24143026", borderRadius: 8, font: "inherit" }} />
      </label>
      <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, marginBottom: 12 }}>
        <input type="checkbox" checked={openNewTab} onChange={(e) => setOpenNewTab(e.target.checked)} />
        <span>Open in new tab</span>
      </label>
      <p style={{ margin: 0, fontSize: 13, borderTop: "1px solid #24143014", paddingTop: 10 }}>
        Preview: <a href={url} target={openNewTab ? "_blank" : undefined} rel={openNewTab ? "noopener" : undefined} style={{ color: accent, fontWeight: 600 }}>{linkText}</a>
      </p>
    </div>
  );
}