I need a Todo list, but can’t find a solution

I am not sure you will find a native WP block that lets anonymous visitors “check off” items and remember them later. Maybe the simple way is to do it in the browser with localStorage (no login, saved per‑device/per‑browser). Add this in a Custom HTML block (or via WPCode/Code Snippets).

1. Markup

<ul id=”todo”> <li data-id=”a”>Item A</li> <li data-id=”b”>Item B</li> <li data-id=”c”>Item C</li> </ul>

2. CSS

<style> #todo li.done { text-decoration: line-through; opacity:.7; cursor:pointer; } #todo li { cursor:pointer; } </style>

3. JS

<script> document.addEventListener(‘DOMContentLoaded’, () => { const KEY = ‘todo-state-v1’; let saved = {}; try { saved = JSON.parse(localStorage.getItem(KEY)) || {}; } catch(e) {} document.querySelectorAll(‘#todo li’).forEach(li => { const id = li.dataset.id || li.textContent.trim(); const setState = (done) => { li.classList.toggle(‘done’, done); li.setAttribute(‘aria-checked’, done ? ‘true’ : ‘false’); if (done) saved[id] = true; else delete saved[id]; localStorage.setItem(KEY, JSON.stringify(saved)); }; // initial li.setAttribute(‘role’, ‘checkbox’); li.setAttribute(‘tabindex’, ‘0’); setState(Boolean(saved[id])); // interactions li.addEventListener(‘click’, () => setState(!li.classList.contains(‘done’))); li.addEventListener(‘keydown’, (e) => { if (e.key === ‘Enter’ || e.key === ‘ ‘) { e.preventDefault(); setState(!li.classList.contains(‘done’)); } }); }); }); </script>

That will toggle strike‑through on click and remember it across refresh/days (on that device). If you prefer adding code safely, use WPCode: https://wordpress.org/plugins/insert-headers-and-footers/

If you really need cross-device persistence without accounts, you’ll need a service (e.g., embed a Notion/Trello checklist) or build a tiny backend keyed by a shareable link – otherwise, I think that localStorage is the best no-login option.

You can actually achieve this using a form-builder plugin like Gravity Forms or WPForms. Both let you create a list of choices that visitors can tick off and return later to see their progress.

Gravity Forms:
If you use Gravity Forms with the Advanced Save & Continue add-on (by Gravity Wiz), it offers auto-save and auto-load functionality. That means the user’s selections can be automatically saved and reloaded when they revisit — even without logging in.
Check Here: https://gravitywiz.com/documentation/gravity-forms-advanced-save-and-continue/

WPForms:
WPForms has the Save & Resume add-on, which allows visitors to save their progress and continue later using a special link. However, in this case, users need to manually click the “Save & Resume” button.
Check Here: https://wpforms.com/docs/how-to-install-and-use-the-save-and-resume-addon-with-wpforms/

These tools are mainly built for creating forms, but they can work great for to-do lists too.
You can let visitors check off items on a list, leave the page, and come back later to see their progress — all without needing to log in.

I also found a great overview of current to-do/checklist plugin options in this blog: “Checklist and To-do list Plugins for WordPress in 2024” by Thomas Maier. He reviews what works and what falls short.
Check here: https://thomas-maier.me/todo-list-checklist-plugins-wordpress/

One more tip: you can achieve a nice “tick and strikethrough” effect via simple CSS once the state is saved (e.g., apply text-decoration: line-through; when an item is marked done). This means the visual “done” state can be styled cleanly even if the underlying plugin handles just the persistence.

If you’d like to further match the form design to your website’s style, you can use these plugins:
For Gravity Forms: https://wordpress.org/plugins/styles-and-layouts-for-gravity-forms/
For WPForms: https://wordpress.org/plugins/styler-for-wpforms/

I am really glad it worked perfecly for you. And yes if you want independent list more than once on the same page each ne needs a unique id and JS must reference the corresponding id as you provided the example. However if you plan to have several of these lists on one page, you can make the script reusable by giving all lists shared class like shopping-list and looping through the

<ul class="shopping-list">
  <li>Option One</li>
  <li>Option Two</li>
  <li>Option Three</li>
  <li>Option Four</li>
</ul>

<ul class="shopping-list">
  <li>Second List Option One</li>
  <li>Second List Option Two</li>
  <li>Second List Option Three</li>
</ul>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.shopping-list').forEach((list, listIndex) => {
      const storageKey = checkedItems_${listIndex};
      const savedState = JSON.parse(localStorage.getItem(storageKey) || '{}');

      list.querySelectorAll('li').forEach((item, itemIndex) => {
        // Restore saved state
        if (savedState[itemIndex]) {
          item.style.textDecoration = 'line-through';
        }

        // Handle clicks
        item.addEventListener('click', () => {
          const isChecked = item.style.textDecoration === 'line-through';
          item.style.textDecoration = isChecked ? 'none' : 'line-through';
          savedState[itemIndex] = !isChecked;
          localStorage.setItem(storageKey, JSON.stringify(savedState));
        });
      });
    });
  });
</script>

<style>
  .shopping-list li {
    cursor: pointer;
    transition: 0.2s;
  }
  .shopping-list li:hover {
    color: #0073aa;
  }
</style>