Detailed search interface.
<form class="asearch" role="search" style="--accent:#BFD9F2;">
<fieldset class="asearch__fieldset" style="border-radius:8px;">
<legend class="asearch__legend">Advanced search</legend>
<label class="asearch__field">
<span class="asearch__field-label">Keywords</span>
<input class="asearch__input" type="search" name="keywords" placeholder="author, title, or keyword" style="border-radius:8px;">
</label>
<label class="asearch__field">
<span class="asearch__field-label">Match type</span>
<select class="asearch__select" name="matchType" style="border-radius:8px;">
<option>any word</option>
<option>all words</option>
<option>exact phrase</option>
</select>
</label>
<label class="asearch__field">
<span class="asearch__field-label">Published after</span>
<input class="asearch__input" type="text" name="after" placeholder="YYYY-MM-DD" style="border-radius:8px;">
</label>
<p class="asearch__hint">Matches <strong>any word</strong> of your keywords.</p>
<button class="asearch__submit" type="submit" style="border-radius:8px;">Search</button>
</fieldset>
</form>
<style>
.asearch { font: 14px system-ui, sans-serif; color: #241430; max-width: 340px; }
.asearch__fieldset { border: 1.5px solid #24143026; padding: 16px; display: grid; gap: 12px; }
.asearch__legend { padding: 0 6px; font-weight: 600; }
.asearch__field { display: block; }
.asearch__field-label { display: block; margin-bottom: 4px; font-weight: 500; font-size: 13px; }
.asearch__input, .asearch__select { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; appearance: none; }
.asearch__input:focus-visible, .asearch__select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.asearch__hint { margin: 0; font-size: 12px; color: #24143099; }
.asearch__submit { justify-self: start; padding: 8px 16px; font: inherit; font-weight: 600; color: #241430; background: var(--accent); border: none; cursor: pointer; }
.asearch__submit:hover { filter: brightness(0.95); }
.asearch__submit:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style><form role="search" class="font-sans text-sm text-[#241430] max-w-[340px]" style="--accent:#BFD9F2;">
<fieldset class="border-[1.5px] border-[#24143026] p-4 grid gap-3" style="border-radius:8px;">
<legend class="px-1.5 font-semibold">Advanced search</legend>
<label class="block">
<span class="block mb-1 font-medium text-[13px]">Keywords</span>
<input type="search" name="keywords" placeholder="author, title, or keyword" style="border-radius:8px;" class="w-full box-border px-2.5 py-2 text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143040] appearance-none focus-visible:outline-none focus-visible:border-[var(--accent)] focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--accent)_35%,transparent)]">
</label>
<label class="block">
<span class="block mb-1 font-medium text-[13px]">Match type</span>
<select name="matchType" style="border-radius:8px;" class="w-full box-border px-2.5 py-2 text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143040] appearance-none focus-visible:outline-none focus-visible:border-[var(--accent)]">
<option>any word</option>
<option>all words</option>
<option>exact phrase</option>
</select>
</label>
<label class="block">
<span class="block mb-1 font-medium text-[13px]">Published after</span>
<input type="text" name="after" placeholder="YYYY-MM-DD" style="border-radius:8px;" class="w-full box-border px-2.5 py-2 text-[#241430] bg-[#FAF7F2] border-[1.5px] border-[#24143040]">
</label>
<p class="m-0 text-xs text-[#24143099]">Matches <strong>any word</strong> of your keywords.</p>
<button type="submit" style="border-radius:8px;" class="justify-self-start px-4 py-2 font-semibold text-[#241430] bg-[var(--accent)] border-none cursor-pointer hover:brightness-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430] focus-visible:outline-offset-2">Search</button>
</fieldset>
</form>export function AdvancedSearch({
label = "Advanced search",
matchType = "any word",
placeholder = "author, title, or keyword",
accent = "#BFD9F2",
radius = 8,
}) {
return (
<form role="search" style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 340, "--accent": accent }}>
<fieldset style={{ border: "1.5px solid #24143026", padding: 16, display: "grid", gap: 12, borderRadius: radius }}>
<legend style={{ padding: "0 6px", fontWeight: 600 }}>{label}</legend>
<label style={{ display: "block" }}>
<span style={{ display: "block", marginBottom: 4, fontWeight: 500, fontSize: 13 }}>Keywords</span>
<input type="search" name="keywords" placeholder={placeholder} style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", font: "inherit", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143040", borderRadius: radius }} />
</label>
<label style={{ display: "block" }}>
<span style={{ display: "block", marginBottom: 4, fontWeight: 500, fontSize: 13 }}>Match type</span>
<select name="matchType" defaultValue={matchType} style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143040", appearance: "none", borderRadius: radius }}>
<option>any word</option>
<option>all words</option>
<option>exact phrase</option>
</select>
</label>
<label style={{ display: "block" }}>
<span style={{ display: "block", marginBottom: 4, fontWeight: 500, fontSize: 13 }}>Published after</span>
<input type="text" name="after" placeholder="YYYY-MM-DD" style={{ width: "100%", boxSizing: "border-box", padding: "8px 10px", color: "#241430", background: "#FAF7F2", border: "1.5px solid #24143040", borderRadius: radius }} />
</label>
<p style={{ margin: 0, fontSize: 12, color: "#24143099" }}>Matches <strong>{matchType}</strong> of your keywords.</p>
<button type="submit" style={{ justifySelf: "start", padding: "8px 16px", fontWeight: 600, color: "#241430", background: accent, border: "none", cursor: "pointer", borderRadius: radius }}>Search</button>
</fieldset>
</form>
);
}