Small piece of guidance within the interface.
<div class="inline-hint-field">
<label class="inline-hint-field__label" for="ih-email">Email address</label>
<input id="ih-email" type="text" class="inline-hint-field__input" aria-describedby="ih-hint" />
<div id="ih-hint" class="inline-hint" data-icon="info" style="--accent:#BFD9F2">
<svg class="ico-info" viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.3"/><path d="M8 7v4.5M8 4.6v.1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
<svg class="ico-tip" viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><path d="M8 1.5a4.5 4.5 0 0 0-2.5 8.2c.4.3.6.8.6 1.3v.3h4v-.3c0-.5.2-1 .6-1.3A4.5 4.5 0 0 0 8 1.5z" stroke="currentColor" stroke-width="1.3"/></svg>
<svg class="ico-warning" viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><path d="M8 2 1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/><path d="M8 6.5v3M8 11.2v.1" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/></svg>
<span class="inline-hint__text">We'll only use this to send receipts.</span>
<button type="button" class="inline-hint__dismiss" aria-label="Dismiss hint">×</button>
</div>
</div>
<style>
.inline-hint-field { font: 16px/1.5 system-ui, sans-serif; color: #241430; max-width: 280px; }
.inline-hint-field__label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.inline-hint-field__input { width: 100%; box-sizing: border-box; border: 1.5px solid #24143030; border-radius: 8px; padding: 9px 11px; font: 14px system-ui, sans-serif; }
.inline-hint-field__input:focus-visible { outline: 2px solid var(--accent, #BFD9F2); border-color: transparent; }
.inline-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; color: var(--accent); }
.inline-hint svg { display: none; flex-shrink: 0; margin-top: 1px; }
.inline-hint[data-icon="info"] .ico-info,
.inline-hint[data-icon="tip"] .ico-tip,
.inline-hint[data-icon="warning"] .ico-warning { display: block; }
.inline-hint__text { font-size: 12.5px; color: #241430cc; flex: 1; }
.inline-hint__dismiss { background: transparent; border: none; color: #24143099; font-size: 13px; line-height: 1; cursor: pointer; padding: 0; }
.inline-hint__dismiss:focus-visible { outline: 2px solid var(--accent); }
</style><div class="font-sans text-[#241430] max-w-[280px]">
<label class="block text-[13px] font-semibold mb-1.5" for="ih-email-tw">Email address</label>
<input id="ih-email-tw" type="text" class="w-full box-border border-[1.5px] border-[#24143030] rounded-lg px-2.5 py-2 text-sm" aria-describedby="ih-hint-tw" />
<div id="ih-hint-tw" class="inline-hint-tw flex items-start gap-1.5 mt-1.5" data-icon="info" style="color:#BFD9F2">
<svg class="ico-info-tw" viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.3"/></svg>
<svg class="ico-tip-tw" viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><path d="M8 1.5a4.5 4.5 0 0 0-2.5 8.2c.4.3.6.8.6 1.3v.3h4v-.3c0-.5.2-1 .6-1.3A4.5 4.5 0 0 0 8 1.5z" stroke="currentColor" stroke-width="1.3"/></svg>
<svg class="ico-warning-tw" viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><path d="M8 2 1.5 13.5h13L8 2z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/></svg>
<span class="text-xs text-[#241430]/80 flex-1">We'll only use this to send receipts.</span>
<button type="button" class="bg-transparent border-0 text-[#24143099] text-[13px] leading-none cursor-pointer p-0" aria-label="Dismiss hint">×</button>
</div>
</div>
<style>
.inline-hint-tw svg { display: none; flex-shrink: 0; margin-top: 1px; }
.inline-hint-tw[data-icon="info"] .ico-info-tw,
.inline-hint-tw[data-icon="tip"] .ico-tip-tw,
.inline-hint-tw[data-icon="warning"] .ico-warning-tw { display: block; }
</style>export function InlineHint({
fieldLabel = "Email address",
message = "We'll only use this to send receipts.",
icon = "info",
dismissible = true,
accent = "#BFD9F2",
}) {
const icons = {
info: <svg viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><circle cx="8" cy="8" r="7" stroke="currentColor" strokeWidth="1.3" /></svg>,
tip: <svg viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><path d="M8 1.5a4.5 4.5 0 0 0-2.5 8.2c.4.3.6.8.6 1.3v.3h4v-.3c0-.5.2-1 .6-1.3A4.5 4.5 0 0 0 8 1.5z" stroke="currentColor" strokeWidth="1.3" /></svg>,
warning: <svg viewBox="0 0 16 16" width="15" height="15" fill="none" aria-hidden="true"><path d="M8 2 1.5 13.5h13L8 2z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" /></svg>,
};
return (
<div style={{ fontFamily: "system-ui, sans-serif", color: "#241430", maxWidth: 280 }}>
<label htmlFor="ih-email-react" style={{ display: "block", fontSize: 13, fontWeight: 600, marginBottom: 6 }}>{fieldLabel}</label>
<input id="ih-email-react" type="text" aria-describedby="ih-hint-react" style={{ width: "100%", boxSizing: "border-box", border: "1.5px solid #24143030", borderRadius: 8, padding: "9px 11px", fontSize: 14 }} />
<div id="ih-hint-react" style={{ display: "flex", alignItems: "flex-start", gap: 6, marginTop: 6, color: accent }}>
{icons[icon] ?? icons.info}
<span style={{ fontSize: 12.5, color: "#241430cc", flex: 1 }}>{message}</span>
{dismissible && (
<button type="button" aria-label="Dismiss hint" style={{ background: "transparent", border: "none", color: "#24143099", fontSize: 13, lineHeight: 1, cursor: "pointer", padding: 0 }}>×</button>
)}
</div>
</div>
);
}