Allows multiple selected values represented as tokens.
<fieldset class="tokenfield" style="--accent:#BFD9F2;--radius:14px;">
<legend class="tokenfield__legend"><label for="tokenfield-input">Assignees</label></legend>
<div class="tokenfield__row">
<span class="tokenfield__chip">Priya Shah<button type="button" class="tokenfield__x" aria-label="Remove Priya Shah"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
<span class="tokenfield__chip">Sam Ortiz<button type="button" class="tokenfield__x" aria-label="Remove Sam Ortiz"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
<span class="tokenfield__chip">Lena Fischer<button type="button" class="tokenfield__x" aria-label="Remove Lena Fischer"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
<span class="tokenfield__chip">Wren Okafor<button type="button" class="tokenfield__x" aria-label="Remove Wren Okafor"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
<input id="tokenfield-input" type="text" class="tokenfield__input" placeholder="Add a person…">
</div>
<p class="tokenfield__help">Up to 6 people</p>
</fieldset>
<style>
.tokenfield { font: 14px system-ui, sans-serif; color: #241430; max-width: 320px; border: none; padding: 0; margin: 0; }
.tokenfield__legend { padding: 0; margin-bottom: 6px; font-weight: 500; }
.tokenfield__row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1.5px solid #24143040; border-radius: var(--radius); background: #FAF7F2; }
.tokenfield__row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.tokenfield__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 10px; background: var(--accent); border-radius: var(--radius); font-size: 13px; }
.tokenfield__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; }
.tokenfield__x:hover { background: #24143040; }
.tokenfield__x:focus-visible { outline: 2px solid #241430; outline-offset: 1px; }
.tokenfield__input { flex: 1; min-width: 100px; border: none; outline: none; background: transparent; font: inherit; color: #241430; padding: 4px; }
.tokenfield__help { margin: 6px 0 0; font-size: 12.5px; color: #24143099; }
</style><fieldset class="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="tokenfield-input-tw">Assignees</label></legend>
<div class="flex flex-wrap gap-1.5 items-center p-2 border-[1.5px] border-[#24143040] bg-[#FAF7F2] focus-within:outline-none" style="border-radius:14px;">
<span class="tokenchip-tw inline-flex items-center gap-1.5 py-1 pl-2.5 pr-1 text-[13px]" style="background:#BFD9F2;border-radius:14px;">Priya Shah<button type="button" class="tokenx-tw inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#24143020] hover:bg-[#24143040] text-[#241430] cursor-pointer p-0" aria-label="Remove Priya Shah"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
<span class="tokenchip-tw inline-flex items-center gap-1.5 py-1 pl-2.5 pr-1 text-[13px]" style="background:#BFD9F2;border-radius:14px;">Sam Ortiz<button type="button" class="tokenx-tw inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#24143020] hover:bg-[#24143040] text-[#241430] cursor-pointer p-0" aria-label="Remove Sam Ortiz"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
<span class="tokenchip-tw inline-flex items-center gap-1.5 py-1 pl-2.5 pr-1 text-[13px]" style="background:#BFD9F2;border-radius:14px;">Lena Fischer<button type="button" class="tokenx-tw inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#24143020] hover:bg-[#24143040] text-[#241430] cursor-pointer p-0" aria-label="Remove Lena Fischer"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
<span class="tokenchip-tw inline-flex items-center gap-1.5 py-1 pl-2.5 pr-1 text-[13px]" style="background:#BFD9F2;border-radius:14px;">Wren Okafor<button type="button" class="tokenx-tw inline-flex items-center justify-center w-4 h-4 rounded-full bg-[#24143020] hover:bg-[#24143040] text-[#241430] cursor-pointer p-0" aria-label="Remove Wren Okafor"><svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" stroke-width="1.4"/></svg></button></span>
<input id="tokenfield-input-tw" type="text" class="flex-1 min-w-[100px] border-0 outline-none bg-transparent font-inherit text-[#241430] p-1" placeholder="Add a person…">
</div>
<p class="mt-1.5 text-xs text-[#24143099]">Up to 6 people</p>
</fieldset>export function TokenInput({
label = "Assignees",
placeholder = "Add a person…",
extraToken = true,
maxTokens = 6,
accent = "#BFD9F2",
radius = 14,
}) {
const people = ["Priya Shah", "Sam Ortiz", "Lena Fischer", ...(extraToken ? ["Wren Okafor"] : [])];
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="tokenfield-input-r">{label}</label>
</legend>
<div style={{ display: "flex", flexWrap: "wrap", gap: 6, alignItems: "center", padding: 8, border: "1.5px solid #24143040", borderRadius: radius, background: "#FAF7F2" }}>
{people.map((name) => (
<span key={name} style={{ display: "inline-flex", alignItems: "center", gap: 6, padding: "4px 6px 4px 10px", background: accent, borderRadius: radius, fontSize: 13 }}>
{name}
<button type="button" aria-label={`Remove ${name}`} style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 16, height: 16, border: "none", borderRadius: "50%", background: "#24143020", color: "#241430", cursor: "pointer", padding: 0 }}>
<svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M1 1l8 8M9 1l-8 8" stroke="currentColor" strokeWidth="1.4" /></svg>
</button>
</span>
))}
<input id="tokenfield-input-r" type="text" placeholder={placeholder} style={{ flex: 1, minWidth: 100, 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 {maxTokens} people</p>
</fieldset>
);
}