Team Picker

Selects teams.

html

<div class="teampicker" style="--accent:#D9C8F0;">
  <label id="tp-label" for="tp-input" class="teampicker__label">Team</label>
  <input id="tp-input" type="text" role="combobox" aria-expanded="true" aria-controls="tp-list" aria-activedescendant="tp-opt-design" aria-autocomplete="list" class="teampicker__input" value="" placeholder="Search teams…">
  
  <ul role="listbox" id="tp-list" aria-labelledby="tp-label" class="teampicker__list teampicker--sel-design">
    <li role="option" id="tp-opt-design" data-key="design" aria-selected="true" class="teampicker__option"><span class="teampicker__dot teampicker__dot--design" aria-hidden="true"></span>Design</li>
    <li role="option" id="tp-opt-platform" data-key="platform" aria-selected="false" class="teampicker__option"><span class="teampicker__dot teampicker__dot--platform" aria-hidden="true"></span>Platform</li>
    <li role="option" id="tp-opt-growth" data-key="growth" aria-selected="false" class="teampicker__option"><span class="teampicker__dot teampicker__dot--growth" aria-hidden="true"></span>Growth</li>
  </ul>
  
</div>
<style>
.teampicker { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 260px; }
.teampicker__label { display: block; margin-bottom: 6px; font-weight: 500; }
.teampicker__input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; border-radius: 8px; }
.teampicker__input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.teampicker__list { list-style: none; margin: 6px 0 0; padding: 4px; border: 1.5px solid #24143040; border-radius: 8px; background: #fff; }
.teampicker__option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.teampicker__option:hover { background: #24143010; }
.teampicker__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.teampicker__dot--design { background: #D9C8F0; }
.teampicker__dot--platform { background: #BFD9F2; }
.teampicker__dot--growth { background: #A8E6C1; }
.teampicker--sel-design [data-key="design"],
.teampicker--sel-platform [data-key="platform"],
.teampicker--sel-growth [data-key="growth"] { background: #24143010; font-weight: 600; }
</style>

tailwind

<div class="teampicker--sel-design block font-sans text-sm text-[#241430] max-w-[260px]" style="--accent:#D9C8F0;">
  <label id="tp-label-tw" for="tp-input-tw" class="block mb-1.5 font-medium">Team</label>
  <input id="tp-input-tw" type="text" role="combobox" aria-expanded="true" aria-controls="tp-list-tw" aria-activedescendant="tp-opt-tw-design" aria-autocomplete="list" value="" placeholder="Search teams…"
    class="w-full box-border px-3 py-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143040] rounded-lg focus-visible:outline-none focus-visible:border-[color:var(--accent)]">
  
  <ul role="listbox" id="tp-list-tw" aria-labelledby="tp-label-tw" class="list-none mt-1.5 p-1 border-[1.5px] border-[#24143040] rounded-lg bg-white">
    <li role="option" id="tp-opt-tw-design" data-key="design" aria-selected="true" class="tp-opt-tw flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]"><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#D9C8F0]" aria-hidden="true"></span>Design</li>
    <li role="option" id="tp-opt-tw-platform" data-key="platform" aria-selected="false" class="tp-opt-tw flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]"><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#BFD9F2]" aria-hidden="true"></span>Platform</li>
    <li role="option" id="tp-opt-tw-growth" data-key="growth" aria-selected="false" class="tp-opt-tw flex items-center gap-2 px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]"><span class="inline-block w-2.5 h-2.5 rounded-full bg-[#A8E6C1]" aria-hidden="true"></span>Growth</li>
  </ul>
  
</div>
<style>
.teampicker--sel-design [data-key="design"],
.teampicker--sel-platform [data-key="platform"],
.teampicker--sel-growth [data-key="growth"] { background: #24143010; font-weight: 600; }
</style>

react

export function TeamPicker({
  label = "Team",
  query = "",
  selectedTeam = "design",
  open = true,
  accent = "#D9C8F0",
}) {
  const teams = [
    { key: "design", name: "Design", colour: "#D9C8F0" },
    { key: "platform", name: "Platform", colour: "#BFD9F2" },
    { key: "growth", name: "Growth", colour: "#A8E6C1" },
  ];
  return (
    <div style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 260 }}>
      <label id="tp-label-r" htmlFor="tp-input-r" style={{ display: "block", marginBottom: 6, fontWeight: 500 }}>{label}</label>
      <input id="tp-input-r" type="text" role="combobox" aria-expanded={open} aria-controls="tp-list-r" aria-activedescendant={`tp-opt-r-${selectedTeam}`} aria-autocomplete="list" defaultValue={query} placeholder="Search teams…" style={{
        width: "100%", boxSizing: "border-box", padding: "10px 12px", font: "inherit", color: "#241430",
        background: "#FAF7F2", border: "1.5px solid #24143040", borderRadius: 8,
      }} />
      {open && (
        <ul role="listbox" id="tp-list-r" aria-labelledby="tp-label-r" style={{ listStyle: "none", margin: "6px 0 0", padding: 4, border: "1.5px solid #24143040", borderRadius: 8, background: "#fff" }}>
          {teams.map((team) => (
            <li key={team.key} id={`tp-opt-r-${team.key}`} role="option" aria-selected={team.key === selectedTeam} style={{
              display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderRadius: 6, cursor: "pointer",
              background: team.key === selectedTeam ? "#24143010" : "transparent",
              fontWeight: team.key === selectedTeam ? 600 : 400,
            }}>
              <span aria-hidden="true" style={{ display: "inline-block", width: 10, height: 10, borderRadius: "50%", background: team.colour, flex: "none" }} />
              {team.name}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}