# Checkboxes not rendered

**URL:** <https://discourse.jupyter.org/t/checkboxes-not-rendered/8574>\
**Category:** JupyterLab\
**Created:** [March 30, 2021, 4:35pm UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574 "2021-03-30T16:35:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Oxana](https://avatars.discourse-cdn.com/v4/letter/o/a88e4f/32.png) [@Oxana](https://discourse.jupyter.org/u/Oxana)\
**Post date:** [March 30, 2021, 4:35pm UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574/1 "2021-03-30T16:35:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [March 30, 2021, 5:33pm UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574/2 "2021-03-30T17:33:04Z")

</div>

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

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

```

Code [here](https://stackoverflow.com/a/47344640/8508004) works fine in JupyterLab 2.20, [launch in your browser and try via a session served by myBinder here](https://github.com/binder-examples/jupyterlab).  
Code [here](https://stackoverflow.com/a/47344640/8508004) works fine in JupyterLab 3.0.12, [launch in your browser and try via a session served by myBinder here](https://gist.github.com/jtpio/8d392846c2f3ee6fab38cdfab5a364ec).

A similar syntax to the code examples linked above is shown [here](https://www.markdownguide.org/extended-syntax/#task-lists).

---

<div class="post-metadata">

**Author:** ![Oxana](https://avatars.discourse-cdn.com/v4/letter/o/a88e4f/32.png) [@Oxana](https://discourse.jupyter.org/u/Oxana)\
**Post date:** [March 30, 2021, 5:57pm UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574/3 "2021-03-30T17:57:10Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [March 30, 2021, 7:30pm UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574/4 "2021-03-30T19:30:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Oxana](https://avatars.discourse-cdn.com/v4/letter/o/a88e4f/32.png) [@Oxana](https://discourse.jupyter.org/u/Oxana)\
**Post date:** [March 31, 2021, 7:27am UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574/5 "2021-03-31T07:27:06Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [March 31, 2021, 3:57pm UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574/6 "2021-03-31T15:57:28Z")

</div>

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](https://docs.github.com/en/github/managing-your-work-on-github/about-task-lists)

> “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:

> [@Oxana](#):
>
> also using `<input type="checkbox"> </input>` there will give me a white box

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:

```python
%%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:

> [@Oxana](#):
>
> To have it interactively

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](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20List.html#Checkbox) . You can go [here](https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Basics.html) 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](https://stackoverflow.com/a/64290695/8508004).) 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](https://ipywidgets.readthedocs.io/en/latest/embedding.html?highlight=state#embedding-jupyter-widgets-in-other-contexts-than-the-notebook) and look into [Embedding Jupyter Widgets in Other Contexts than the Notebook — Jupyter Widgets 8.1.1 documentation](https://ipywidgets.readthedocs.io/en/latest/embedding.html?highlight=state#save-notebook-widget-state) . 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](https://towardsdatascience.com/javascript-charts-on-jupyter-notebooks-dd25f794cf6a) to tie checkboxes to notebook (if that is in some way possible?), the thread topic title has been exhausted.

---

<div class="post-metadata">

**Author:** ![jot33](https://avatars.discourse-cdn.com/v4/letter/j/f6c823/32.png) [@jot33](https://discourse.jupyter.org/u/jot33)\
**Post date:** [April 5, 2022, 5:15am UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574/7 "2022-04-05T05:15:38Z")

</div>

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](https://canada1.discourse-cdn.com/flex031/uploads/jupyter/original/2X/b/bb799a8858e85ee6a5cd552179f2a009df1410b2.png)

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

Any help would be appreciated. Thanks!

---

<div class="post-metadata">

**Author:** ![fomightez](https://yyz1.discourse-cdn.com/flex031/user_avatar/discourse.jupyter.org/fomightez/32/495_2.png) [@fomightez](https://discourse.jupyter.org/u/fomightez)\
**Post date:** [April 5, 2022, 3:35pm UTC](https://discourse.jupyter.org/t/checkboxes-not-rendered/8574/8 "2022-04-05T15:35:52Z")

</div>

My testing results so far:

- works in JupyterLab Version 3.3.2 in Chrome. (Launched from [here](https://gist.github.com/fomightez/ece14f28f9b751a11646270eb839243c). )
- works in JupyterLab Version 3.3.1 in Chrome. (Launched from [here](https://gist.github.com/jtpio/dc217fb83255f54bf826a3804f5a0d7c). )
- works in JupyterLab Version 3.3.0rc0 in Chrome. (Launched from [here](https://gist.github.com/fcollonval/facfadcd926621a84556a040aac71a8f).)

What browser are you using? There is a report [here](https://github.com/jupyterlab/jupyterlab/issues/12335) that Safari is not rendering symbols in markdown; whereas Chrome does.