Organisation Picker

Selects organisations.

html

<details class="orgpicker orgpicker--card" style="--c:#BFD9F2;">
  <summary class="orgpicker__summary">
    <span class="orgpicker__mark" aria-hidden="true">Clydeford Ltd</span>
    <span class="orgpicker__text">
      <strong>Clydeford Ltd</strong>
      <span class="orgpicker__meta">128 members · Verified</span>
    </span>
  </summary>
  <ul class="orgpicker__list">
    <li><button type="button" class="orgpicker__option">Northbank Studio</button></li>
    <li><button type="button" class="orgpicker__option">Harlow &amp; Vale</button></li>
  </ul>
</details>
<style>
.orgpicker { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 280px; }
.orgpicker__summary { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid var(--c); border-radius: 10px; cursor: pointer; list-style: none; background: #FAF7F2; }
.orgpicker__summary::-webkit-details-marker { display: none; }
.orgpicker__summary:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.orgpicker__mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--c); font-weight: 700; font-size: 10px; line-height: 1.1; text-align: center; padding: 2px; flex: none; overflow: hidden; }
.orgpicker--compact .orgpicker__summary { padding: 6px 10px; }
.orgpicker__meta { display: block; font-size: 12px; opacity: .75; }
.orgpicker__list { margin: 6px 0 0; padding: 6px; border: 1px solid #24143022; border-radius: 10px; list-style: none; display: grid; gap: 4px; }
.orgpicker__option { width: 100%; text-align: left; background: none; border: none; padding: 6px 8px; border-radius: 6px; font: inherit; cursor: pointer; color: #241430; }
.orgpicker__option:hover, .orgpicker__option:focus-visible { background: color-mix(in srgb, var(--c) 25%, #FAF7F2); outline: none; }
</style>

tailwind

<details class="orgpicker-tw orgpicker-tw--card max-w-xs font-sans text-[#241430]" style="--c:#BFD9F2;">
  <summary class="orgpicker-tw__summary flex items-center gap-2.5 px-3 py-2.5 border-[1.5px] rounded-[10px] cursor-pointer list-none bg-[#FAF7F2]" style="border-color:var(--c);">
    <span class="inline-flex items-center justify-center w-8 h-8 rounded-lg font-bold text-[13px] flex-none" style="background:var(--c);">Clydeford Ltd</span>
    <span>
      <strong class="block">Clydeford Ltd</strong>
      <span class="block text-xs opacity-75">128 members · Verified</span>
    </span>
  </summary>
  <ul class="mt-1.5 p-1.5 border border-[#24143022] rounded-[10px] list-none grid gap-1">
    <li><button type="button" class="w-full text-left bg-transparent border-none px-2 py-1.5 rounded-md hover:bg-black/5">Northbank Studio</button></li>
    <li><button type="button" class="w-full text-left bg-transparent border-none px-2 py-1.5 rounded-md hover:bg-black/5">Harlow &amp; Vale</button></li>
  </ul>
</details>
<style>
.orgpicker-tw--compact .orgpicker-tw__summary { padding: 6px 10px; }
</style>

react

export function OrganisationPicker({
  org = "Clydeford Ltd",
  memberCount = 128,
  verified = true,
  color = "#BFD9F2",
  style: pickerStyle = "card",
}) {
  return (
    <details style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 280 }}>
      <summary style={{ display: "flex", alignItems: "center", gap: 10, padding: pickerStyle === "compact" ? "6px 10px" : "10px 12px", border: `1.5px solid ${color}`, borderRadius: 10, cursor: "pointer", listStyle: "none", background: "#FAF7F2" }}>
        <span aria-hidden="true" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, borderRadius: 8, background: color, fontWeight: 700, fontSize: 13, flex: "none" }}>{org.slice(0, 2)}</span>
        <span>
          <strong style={{ display: "block" }}>{org}</strong>
          <span style={{ display: "block", fontSize: 12, opacity: 0.75 }}>{memberCount} members{verified ? " · Verified" : ""}</span>
        </span>
      </summary>
      <ul style={{ margin: "6px 0 0", padding: 6, border: "1px solid #24143022", borderRadius: 10, listStyle: "none", display: "grid", gap: 4 }}>
        <li><button type="button" style={{ width: "100%", textAlign: "left", background: "none", border: "none", padding: "6px 8px", borderRadius: 6, cursor: "pointer", color: "#241430" }}>Northbank Studio</button></li>
        <li><button type="button" style={{ width: "100%", textAlign: "left", background: "none", border: "none", padding: "6px 8px", borderRadius: 6, cursor: "pointer", color: "#241430" }}>Harlow &amp; Vale</button></li>
      </ul>
    </details>
  );
}