{
  "id": "L03",
  "title": "Leading element",
  "topic": "lists",
  "use": "An entry gets at most one leading element — an icon, an avatar or a checkbox. Here the three versions stand side by side. Every entry carries the same kind, so the text of all entries starts on the same edge. As soon as the list carries a selection, the checkbox displaces icon and avatar.",
  "decisions": [
    "One leading element or none: two push the text to the right and leave open which one leads the row.",
    "Every entry carries the same kind of element in the same size: only then does the text of all entries start on one edge, and an entry without an element of its own gets a spacer of that width (the list's own rule).",
    "The checkbox displaces icon and avatar: once the list carries a selection, the box is the handle of the row, and the kind of entry moves into the secondary line. Two offers at the start of a row — select and open — are one too many.",
    "An icon is worth its place only when it distinguishes: three times the same symbol is color without a statement; then it goes, and the text gains the room.",
    "A list gets checkboxes only for an action that takes several entries at once — here Send, in the list's head. It is unavailable while nothing is selected, and the count beside the title says why.",
    "An avatar stands at list size, large enough to be read beside two lines of text; in front of a tile title it would not be."
  ],
  "try": [
    {
      "do": "Compare the three lists",
      "then": "icon, avatar, checkbox — exactly one per entry, the same kind in every entry of a list"
    },
    {
      "do": "Look at the text edge in each list",
      "then": "all lines of a list start on one edge"
    },
    {
      "do": "Tick an entry in Files to send",
      "then": "the count says 1 of 3 selected and Send becomes available; the box leads the row, and no icon stands before it"
    },
    {
      "do": "Uncheck it again",
      "then": "the count says 0 of 3 selected, and Send is unavailable again"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<style>\n  .l03-avatar {\n    --ed-avatar-size: 2rem;\n  }\n</style>\n\n<div class=\"ed-grid\" style=\"--ed-grid-min-column-size: 18rem\">\n  <!-- Demo only, not part of the pattern. Each list stands on a screen of its own; the heading only names the case here. -->\n  <ed-list label=\"Files\">\n    <ed-list-item>\n      <ed-icon slot=\"start\" name=\"page_pdf\"></ed-icon>\n      Payroll journal 07-2026.pdf\n      <span slot=\"description\">PDF · 512 kB</span>\n    </ed-list-item>\n    <ed-list-item>\n      <ed-icon slot=\"start\" name=\"page_xls\"></ed-icon>\n      Client list office 2026.xlsx\n      <span slot=\"description\">XLSX · 84 kB</span>\n    </ed-list-item>\n    <ed-list-item>\n      <ed-icon slot=\"start\" name=\"page_pdf\"></ed-icon>\n      Acceptance report series 4471.pdf\n      <span slot=\"description\">PDF · 96 kB</span>\n    </ed-list-item>\n  </ed-list>\n\n  <!-- Demo only, not part of the pattern. Each list stands on a screen of its own; the heading only names the case here. -->\n  <ed-list label=\"Contacts\">\n    <ed-list-item>\n      <ed-avatar slot=\"start\" class=\"l03-avatar\" initials=\"AW\" label=\"Ann-Kathrin Weißgerber\"></ed-avatar>\n      Ann-Kathrin Weißgerber\n      <span slot=\"description\">Personnel administration · since 09/01/2019</span>\n    </ed-list-item>\n    <ed-list-item>\n      <ed-avatar slot=\"start\" class=\"l03-avatar\" initials=\"HO\" label=\"Hans-Jürgen Odenthal\"></ed-avatar>\n      Hans-Jürgen Odenthal\n      <span slot=\"description\">Authorized signatory · since 04/01/2019</span>\n    </ed-list-item>\n    <ed-list-item>\n      <ed-avatar slot=\"start\" class=\"l03-avatar\" initials=\"MK\" label=\"Marianne Kessler-Brandt\"></ed-avatar>\n      Marianne Kessler-Brandt\n      <span slot=\"description\">Commercial management · since 03/15/2021</span>\n    </ed-list-item>\n  </ed-list>\n\n  <!-- Demo only, not part of the pattern. Each list stands on a screen of its own; the heading only names the case here. -->\n  <ed-list id=\"l03-files-to-send\" label=\"Files to send\" selectable>\n    <ed-button id=\"l03-send\" slot=\"actions\" disabled>\n      <ed-icon slot=\"start\" name=\"send\"></ed-icon>\n      Send\n    </ed-button>\n    <ed-list-item value=\"payroll-journal\">\n      Payroll journal 07-2026.pdf\n      <span slot=\"description\">PDF · 512 kB</span>\n    </ed-list-item>\n    <ed-list-item value=\"client-list\">\n      Client list office 2026.xlsx\n      <span slot=\"description\">XLSX · 84 kB</span>\n    </ed-list-item>\n    <ed-list-item value=\"acceptance-report\">\n      Acceptance report series 4471.pdf\n      <span slot=\"description\">PDF · 96 kB</span>\n    </ed-list-item>\n  </ed-list>\n</div>\n\n<script type=\"module\">\n  await customElements.whenDefined('ed-list');\n\n  const list = document.getElementById('l03-files-to-send');\n  const send = document.getElementById('l03-send');\n  list.addEventListener('ed-list-selection-change', event => {\n    send.disabled = event.detail.selection.length === 0;\n  });\n</script>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/l03-leading-element/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/lists/"
}