Checkboxes not rendered

In HTML Markdown using [ ] will give a checkbox and [x] a checked one. If I have that in a markdown cell in an ipynb notebook it works, but it is not rendered at all if I do it in Jupyter lab, also using <input type="checkbox"> </input> there will give me a white box, which can not be checked. Any idea how to implement in Jupyterlab checkboxes for progress documentation.

1 Like

I think perhaps instead of “In HTML using [ ] will give a checkbox and [x] a checked one” you mean:

In Markdown using - [ ] will give a checkbox and - [x] a checked one`?

Code here works fine in JupyterLab 2.20, launch in your browser and try via a session served by myBinder here.
Code here works fine in JupyterLab 3.0.12, launch in your browser and try via a session served by myBinder here.

A similar syntax to the code examples linked above is shown here.

1 Like

Yes i meant Markdown, thanks. I would like to have clickable checkboxes than i need to have an extension for markdown in juypterlab i guess?

If you have relatively current JupyterLab (2.20 or 3.0.12), you should just need to change the cell to markdown, and checkbox markdown works. I listed a place you can test if it works in my post.
If yours isn’t behaving like that, you need to update.

yes we needed to upgrade, but still they can not be activated via a click, only inserting a x will check them. To have it interactively which extension is suggested or do we need to write it our own?

Originally you just asked about ‘checkboxes for progress documentation’. The markdown boxes are going to be what you want because that check status will be represented when the next person opens the notebook. The user simply edits the markdown which is easily used as it is very similar to basic text. Then saves the updated notebook This is how Github puts it at About task lists - GitHub Docs

“Task lists render with clickable checkboxes in comments. You can select or unselect the checkboxes to mark them as complete or incomplete.
Task lists render as read-only checkboxes in Markdown files. People with write permissions in the repository can edit the file to select or unselect the checkboxes.
You can view task list summary information in issue and pull request lists, when the task list is in the initial comment.”

As for your original comment:

I haven’t explored if you use HTML code & save the notebook, if the checkbox state survives if you reopen. You can test yourself by putting the following in a notebook code cell and toggling the boxes, saving, and reopening the saved notebook:

%%HTML
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>

As for your latest comment:

If you need checkboxes that are going to work in the notebook interactively and be tied to the backing kernel, you are looking for checkboxes in ipywidgets . You can go here to see a launch binder badge, and you can launch a session from there and play around with the examples actively in JupyterLab with ipywidgets installed. The active, basic checkbox example is in Widget List.ipynb. (A succinct code example that may work here.) However, the state of these isn’t shared beyond the kernel backing them. You’ll want to see Embedding Jupyter Widgets in Other Contexts than the Notebook — Jupyter Widgets 8.1.1 documentation and look into Embedding Jupyter Widgets in Other Contexts than the Notebook — Jupyter Widgets 8.1.1 documentation . I don’t have experience with ‘Save Notebook Widget State’ myself. I suggest if you go that route and encounter issues, that you start another thread because I think, with the exception of incorporating magic %%javascript to tie checkboxes to notebook (if that is in some way possible?), the thread topic title has been exhausted.

I’m not sure if I’m doing something wrong, but this doesn’t appear to be working for me in JupyterLab v3.3.2.

In a markdown cell, I tried - [x] for a checked box and - [ ] for an unchecked box. I seem to be having the same render problem as described at the top and also shown below in the screenshot.

image

I looked for a related setting, even searching through JSON versions of settings, but couldn’t find anything.

Any help would be appreciated. Thanks!

My testing results so far:

  • works in JupyterLab Version 3.3.2 in Chrome. (Launched from here. )
  • works in JupyterLab Version 3.3.1 in Chrome. (Launched from here. )
  • works in JupyterLab Version 3.3.0rc0 in Chrome. (Launched from here.)

What browser are you using? There is a report here that Safari is not rendering symbols in markdown; whereas Chrome does.