Edit User Picker · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"userpicker userpicker--sel-{{selectedUser}}{{#if showAvatar}} userpicker--avatars{{/if}}\" style=\"--accent:{{accent}};\">\n  <label id=\"up-label\" for=\"up-input\" class=\"userpicker__label\">{{label}}</label>\n  <input id=\"up-input\" type=\"text\" role=\"combobox\" aria-expanded=\"{{open}}\" aria-controls=\"up-list\" aria-activedescendant=\"up-opt-{{selectedUser}}\" aria-autocomplete=\"list\" class=\"userpicker__input\" placeholder=\"Search people…\">\n  {{#if open}}\n  <ul role=\"listbox\" id=\"up-list\" aria-labelledby=\"up-label\" class=\"userpicker__list\">\n    <li role=\"option\" id=\"up-opt-priya\" data-key=\"priya\" aria-selected=\"true\" class=\"userpicker__option\"><svg class=\"userpicker__avatar\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"#D9C8F0\"/><text x=\"11\" y=\"15\" font-size=\"9\" font-family=\"system-ui, sans-serif\" text-anchor=\"middle\" fill=\"#241430\">PS</text></svg>Priya Shah</li>\n    <li role=\"option\" id=\"up-opt-sam\" data-key=\"sam\" aria-selected=\"false\" class=\"userpicker__option\"><svg class=\"userpicker__avatar\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"#A8E6C1\"/><text x=\"11\" y=\"15\" font-size=\"9\" font-family=\"system-ui, sans-serif\" text-anchor=\"middle\" fill=\"#241430\">SO</text></svg>Sam Ortiz</li>\n    <li role=\"option\" id=\"up-opt-lena\" data-key=\"lena\" aria-selected=\"false\" class=\"userpicker__option\"><svg class=\"userpicker__avatar\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"#F5C2E0\"/><text x=\"11\" y=\"15\" font-size=\"9\" font-family=\"system-ui, sans-serif\" text-anchor=\"middle\" fill=\"#241430\">LF</text></svg>Lena Fischer</li>\n  </ul>\n  {{/if}}\n</div>\n<style>\n.userpicker { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 260px; }\n.userpicker__label { display: block; margin-bottom: 6px; font-weight: 500; }\n.userpicker__input { width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; border-radius: 8px; }\n.userpicker__input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }\n.userpicker__list { list-style: none; margin: 6px 0 0; padding: 4px; border: 1.5px solid #24143040; border-radius: 8px; background: #fff; }\n.userpicker__option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }\n.userpicker__option:hover { background: #24143010; }\n.userpicker__avatar { display: none; flex: none; border-radius: 50%; }\n.userpicker--avatars .userpicker__avatar { display: block; }\n.userpicker--sel-priya [data-key=\"priya\"],\n.userpicker--sel-sam [data-key=\"sam\"],\n.userpicker--sel-lena [data-key=\"lena\"] { background: #24143010; font-weight: 600; }\n</style>",
  "tailwind": "<div class=\"userpicker-tw--sel-{{selectedUser}}{{#if showAvatar}} userpicker-tw--avatars{{/if}} block font-sans text-sm text-[#241430] max-w-[260px]\" style=\"--accent:{{accent}};\">\n  <label id=\"up-label-tw\" for=\"up-input-tw\" class=\"block mb-1.5 font-medium\">{{label}}</label>\n  <input id=\"up-input-tw\" type=\"text\" role=\"combobox\" aria-expanded=\"{{open}}\" aria-controls=\"up-list-tw\" aria-activedescendant=\"up-opt-tw-{{selectedUser}}\" aria-autocomplete=\"list\" placeholder=\"Search people…\"\n    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)]\">\n  {{#if open}}\n  <ul role=\"listbox\" id=\"up-list-tw\" aria-labelledby=\"up-label-tw\" class=\"list-none mt-1.5 p-1 border-[1.5px] border-[#24143040] rounded-lg bg-white\">\n    <li role=\"option\" id=\"up-opt-tw-priya\" data-key=\"priya\" aria-selected=\"true\" class=\"up-opt-tw flex items-center gap-2 px-2.5 py-1.5 rounded-md cursor-pointer hover:bg-[#24143010]\"><svg class=\"up-avatar-tw\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"#D9C8F0\"/><text x=\"11\" y=\"15\" font-size=\"9\" font-family=\"system-ui, sans-serif\" text-anchor=\"middle\" fill=\"#241430\">PS</text></svg>Priya Shah</li>\n    <li role=\"option\" id=\"up-opt-tw-sam\" data-key=\"sam\" aria-selected=\"false\" class=\"up-opt-tw flex items-center gap-2 px-2.5 py-1.5 rounded-md cursor-pointer hover:bg-[#24143010]\"><svg class=\"up-avatar-tw\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"#A8E6C1\"/><text x=\"11\" y=\"15\" font-size=\"9\" font-family=\"system-ui, sans-serif\" text-anchor=\"middle\" fill=\"#241430\">SO</text></svg>Sam Ortiz</li>\n    <li role=\"option\" id=\"up-opt-tw-lena\" data-key=\"lena\" aria-selected=\"false\" class=\"up-opt-tw flex items-center gap-2 px-2.5 py-1.5 rounded-md cursor-pointer hover:bg-[#24143010]\"><svg class=\"up-avatar-tw\" width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"#F5C2E0\"/><text x=\"11\" y=\"15\" font-size=\"9\" font-family=\"system-ui, sans-serif\" text-anchor=\"middle\" fill=\"#241430\">LF</text></svg>Lena Fischer</li>\n  </ul>\n  {{/if}}\n</div>\n<style>\n.up-avatar-tw { display: none; flex: none; border-radius: 9999px; }\n.userpicker-tw--avatars .up-avatar-tw { display: block; }\n.userpicker-tw--sel-priya [data-key=\"priya\"],\n.userpicker-tw--sel-sam [data-key=\"sam\"],\n.userpicker-tw--sel-lena [data-key=\"lena\"] { background: #24143010; font-weight: 600; }\n</style>",
  "react": "export function UserPicker({\n  label = \"{{label}}\",\n  selectedUser = \"{{selectedUser}}\",\n  open = {{open}},\n  showAvatar = {{showAvatar}},\n  accent = \"{{accent}}\",\n}) {\n  const people = [\n    { key: \"priya\", name: \"Priya Shah\", initials: \"PS\", colour: \"#D9C8F0\" },\n    { key: \"sam\", name: \"Sam Ortiz\", initials: \"SO\", colour: \"#A8E6C1\" },\n    { key: \"lena\", name: \"Lena Fischer\", initials: \"LF\", colour: \"#F5C2E0\" },\n  ];\n  return (\n    <div style={{ display: \"block\", fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\", maxWidth: 260 }}>\n      <label id=\"up-label-r\" htmlFor=\"up-input-r\" style={{ display: \"block\", marginBottom: 6, fontWeight: 500 }}>{label}</label>\n      <input id=\"up-input-r\" type=\"text\" role=\"combobox\" aria-expanded={open} aria-controls=\"up-list-r\" aria-activedescendant={`up-opt-r-${selectedUser}`} aria-autocomplete=\"list\" placeholder=\"Search people…\" style={{\n        width: \"100%\", boxSizing: \"border-box\", padding: \"10px 12px\", font: \"inherit\", color: \"#241430\",\n        background: \"#FAF7F2\", border: \"1.5px solid #24143040\", borderRadius: 8,\n      }} />\n      {open && (\n        <ul role=\"listbox\" id=\"up-list-r\" aria-labelledby=\"up-label-r\" style={{ listStyle: \"none\", margin: \"6px 0 0\", padding: 4, border: \"1.5px solid #24143040\", borderRadius: 8, background: \"#fff\" }}>\n          {people.map((person) => (\n            <li key={person.key} id={`up-opt-r-${person.key}`} role=\"option\" aria-selected={person.key === selectedUser} style={{\n              display: \"flex\", alignItems: \"center\", gap: 8, padding: \"6px 10px\", borderRadius: 6, cursor: \"pointer\",\n              background: person.key === selectedUser ? \"#24143010\" : \"transparent\",\n              fontWeight: person.key === selectedUser ? 600 : 400,\n            }}>\n              {showAvatar && (\n                <svg width=\"22\" height=\"22\" viewBox=\"0 0 22 22\" aria-hidden=\"true\" style={{ flex: \"none\", borderRadius: \"50%\" }}>\n                  <circle cx=\"11\" cy=\"11\" r=\"11\" fill={person.colour} />\n                  <text x=\"11\" y=\"15\" fontSize=\"9\" fontFamily=\"system-ui, sans-serif\" textAnchor=\"middle\" fill=\"#241430\">{person.initials}</text>\n                </svg>\n              )}\n              {person.name}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}"
}