Edit Object 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=\"picker picker--type-{{resourceType}} picker--sel-{{selectedResource}}\" style=\"--accent:{{accent}};\">\n  <span id=\"op-label\" class=\"picker__label\">{{label}}</span>\n  <button type=\"button\" class=\"picker__trigger\" aria-haspopup=\"listbox\" aria-expanded=\"{{open}}\" aria-controls=\"op-list\" aria-labelledby=\"op-label\">\n    <svg class=\"picker__icon picker__icon--file\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 1h6l4 4v10H3z\" fill=\"none\" stroke=\"#241430\" stroke-width=\"1.3\"/></svg>\n    <svg class=\"picker__icon picker__icon--folder\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 3h5l1.5 2H15v9H1z\" fill=\"none\" stroke=\"#241430\" stroke-width=\"1.3\"/></svg>\n    <svg class=\"picker__icon picker__icon--link\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M6 10 10 6M5 8 3 10a2.5 2.5 0 0 0 3.5 3.5L8 12M11 8l2-2a2.5 2.5 0 0 0-3.5-3.5L8 4\" fill=\"none\" stroke=\"#241430\" stroke-width=\"1.3\"/></svg>\n    <span class=\"picker__triggertext\">Choose a {{resourceType}}</span>\n  </button>\n  {{#if open}}\n  <ul role=\"listbox\" id=\"op-list\" aria-labelledby=\"op-label\" class=\"picker__list\">\n    <li role=\"option\" data-key=\"report\" aria-selected=\"true\" class=\"picker__option\">Q3 Report.pdf</li>\n    <li role=\"option\" data-key=\"design\" aria-selected=\"false\" class=\"picker__option\">Brand Guide.fig</li>\n    <li role=\"option\" data-key=\"site\" aria-selected=\"false\" class=\"picker__option\">Marketing Site</li>\n  </ul>\n  {{/if}}\n</div>\n<style>\n.picker { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 280px; }\n.picker__label { display: block; margin-bottom: 6px; font-weight: 500; }\n.picker__trigger { display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; color: #241430; background: #FAF7F2; border: 1.5px solid #24143040; border-radius: 8px; cursor: pointer; }\n.picker__trigger:hover { border-color: var(--accent); }\n.picker__trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }\n.picker__icon { display: none; flex: none; }\n.picker--type-file .picker__icon--file { display: block; }\n.picker--type-folder .picker__icon--folder { display: block; }\n.picker--type-link .picker__icon--link { display: block; }\n.picker__triggertext { flex: 1; text-align: left; }\n.picker__list { list-style: none; margin: 6px 0 0; padding: 4px; border: 1.5px solid #24143040; border-radius: 8px; background: #fff; }\n.picker__option { padding: 8px 10px; border-radius: 6px; cursor: pointer; }\n.picker__option:hover { background: #24143010; }\n.picker--sel-report [data-key=\"report\"],\n.picker--sel-design [data-key=\"design\"],\n.picker--sel-site [data-key=\"site\"] { background: var(--accent); font-weight: 600; }\n</style>",
  "tailwind": "<div class=\"picker--type-{{resourceType}} picker--sel-{{selectedResource}} block max-w-[280px] font-sans text-sm text-[#241430]\" style=\"--accent:{{accent}};\">\n  <span id=\"op-label-tw\" class=\"block mb-1.5 font-medium\">{{label}}</span>\n  <button type=\"button\" aria-haspopup=\"listbox\" aria-expanded=\"{{open}}\" aria-controls=\"op-list-tw\" aria-labelledby=\"op-label-tw\"\n    class=\"flex items-center gap-2 w-full box-border px-3 py-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143040] rounded-lg cursor-pointer hover:border-[color:var(--accent)] focus-visible:outline-none focus-visible:border-[color:var(--accent)]\">\n    <svg class=\"op-icon-tw op-icon-tw--file\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 1h6l4 4v10H3z\" fill=\"none\" stroke=\"#241430\" stroke-width=\"1.3\"/></svg>\n    <svg class=\"op-icon-tw op-icon-tw--folder\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 3h5l1.5 2H15v9H1z\" fill=\"none\" stroke=\"#241430\" stroke-width=\"1.3\"/></svg>\n    <svg class=\"op-icon-tw op-icon-tw--link\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M6 10 10 6M5 8 3 10a2.5 2.5 0 0 0 3.5 3.5L8 12M11 8l2-2a2.5 2.5 0 0 0-3.5-3.5L8 4\" fill=\"none\" stroke=\"#241430\" stroke-width=\"1.3\"/></svg>\n    <span class=\"flex-1 text-left\">Choose a {{resourceType}}</span>\n  </button>\n  {{#if open}}\n  <ul role=\"listbox\" id=\"op-list-tw\" aria-labelledby=\"op-label-tw\" class=\"list-none mt-1.5 p-1 border-[1.5px] border-[#24143040] rounded-lg bg-white\">\n    <li role=\"option\" data-key=\"report\" aria-selected=\"true\" class=\"op-option-tw px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]\">Q3 Report.pdf</li>\n    <li role=\"option\" data-key=\"design\" aria-selected=\"false\" class=\"op-option-tw px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]\">Brand Guide.fig</li>\n    <li role=\"option\" data-key=\"site\" aria-selected=\"false\" class=\"op-option-tw px-2.5 py-2 rounded-md cursor-pointer hover:bg-[#24143010]\">Marketing Site</li>\n  </ul>\n  {{/if}}\n</div>\n<style>\n.op-icon-tw { display: none; flex: none; }\n.picker--type-file .op-icon-tw--file { display: block; }\n.picker--type-folder .op-icon-tw--folder { display: block; }\n.picker--type-link .op-icon-tw--link { display: block; }\n.picker--sel-report [data-key=\"report\"],\n.picker--sel-design [data-key=\"design\"],\n.picker--sel-site [data-key=\"site\"] { background: var(--accent); font-weight: 600; }\n</style>",
  "react": "export function ObjectPicker({\n  label = \"{{label}}\",\n  resourceType = \"{{resourceType}}\",\n  selectedResource = \"{{selectedResource}}\",\n  open = {{open}},\n  accent = \"{{accent}}\",\n}) {\n  const icons = {\n    file: <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M3 1h6l4 4v10H3z\" fill=\"none\" stroke=\"#241430\" strokeWidth=\"1.3\" /></svg>,\n    folder: <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M1 3h5l1.5 2H15v9H1z\" fill=\"none\" stroke=\"#241430\" strokeWidth=\"1.3\" /></svg>,\n    link: <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M6 10 10 6M5 8 3 10a2.5 2.5 0 0 0 3.5 3.5L8 12M11 8l2-2a2.5 2.5 0 0 0-3.5-3.5L8 4\" fill=\"none\" stroke=\"#241430\" strokeWidth=\"1.3\" /></svg>,\n  };\n  const items = [\n    { key: \"report\", text: \"Q3 Report.pdf\" },\n    { key: \"design\", text: \"Brand Guide.fig\" },\n    { key: \"site\", text: \"Marketing Site\" },\n  ];\n  return (\n    <div style={{ display: \"block\", maxWidth: 280, fontFamily: \"system-ui, sans-serif\", fontSize: 14, color: \"#241430\" }}>\n      <span id=\"op-label-r\" style={{ display: \"block\", marginBottom: 6, fontWeight: 500 }}>{label}</span>\n      <button type=\"button\" aria-haspopup=\"listbox\" aria-expanded={open} aria-controls=\"op-list-r\" aria-labelledby=\"op-label-r\" style={{\n        display: \"flex\", alignItems: \"center\", gap: 8, width: \"100%\", boxSizing: \"border-box\", padding: \"10px 12px\",\n        font: \"inherit\", color: \"#241430\", background: \"#FAF7F2\", border: \"1.5px solid #24143040\", borderRadius: 8, cursor: \"pointer\",\n      }}>\n        {icons[resourceType] ?? icons.file}\n        <span style={{ flex: 1, textAlign: \"left\" }}>Choose a {resourceType}</span>\n      </button>\n      {open && (\n        <ul role=\"listbox\" id=\"op-list-r\" aria-labelledby=\"op-label-r\" style={{ listStyle: \"none\", margin: \"6px 0 0\", padding: 4, border: \"1.5px solid #24143040\", borderRadius: 8, background: \"#fff\" }}>\n          {items.map((item) => (\n            <li key={item.key} role=\"option\" aria-selected={item.key === selectedResource} style={{\n              padding: \"8px 10px\", borderRadius: 6, cursor: \"pointer\",\n              background: item.key === selectedResource ? accent : \"transparent\",\n              fontWeight: item.key === selectedResource ? 600 : 400,\n            }}>{item.text}</li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}"
}