Markdown checkboxes not rendering correctly

[Eric1]

I’m running this app locally. Part of the app renders some markdown that I produce.

Sample markdown:

## Shopping List
- [ ] 1.5 tbsp olive oil
- [ ] 1 tbsp paprika
- [ ] 1 tbsp cumin

When I render the markdown using st.markdown, these show up incorrectly. Instead of usable checkboxes, I see bullet points with what appears to be a checkbox but you can’t interact with it at all:

Does st.markdown just not support checkboxes properly, or am I doing something wrong?

[Goyo]

@Eric1

Instead of usable checkboxes

You have the checkboxes but they are disabled That conforms to the specification and it is also what github does IIRC.

## Shopping List
- [ ] 1.5 tbsp olive oil
- [X] 1 tbsp paprika
- [ ] 1 tbsp cumin

@Eric1

I see bullet points

That seems to be correct too, since they are supposed to be list items. I don’t know why Github does not render them.

[Eric1]

The spec you linked says:

When rendered, the task list item marker is replaced with a semantic checkbox element; in an HTML output, this would be an <input type="checkbox"> element.

If the character between the brackets is a whitespace character, the checkbox is unchecked. Otherwise, the checkbox is checked.

This spec does not define how the checkbox elements are interacted with: in practice, implementors are free to render the checkboxes as disabled or inmutable elements, or they may dynamically handle dynamic interactions (i.e. checking, unchecking) in the final rendered document.

So it seems like streamlit could decide to make them interactive.

[Goyo]

@Eric1

When rendered, the task list item marker is replaced with a semantic checkbox element; in an HTML output, this would be an <input type="checkbox"> element.

Right, I overlooked that part. So Streamlit is nor conformant here. I just noticed that Discuss does it correctly:

## Shopping List
- [ ] 1.5 tbsp olive oil
- [X] 1 tbsp paprika
- [ ] 1 tbsp cumin

Shopping List

• 1.5 tbsp olive oil
• 1 tbsp paprika
• 1 tbsp cumin

@Eric1

So it seems like streamlit could decide to make them interactive.

Indeed, but why? Markdown was designed for static, non-interactive documents, and doesn’t have any input elements. It looks to me that making task lists interactive would be inconsistent. And (almost?) everybody implementing markdown seems to think the same. I wonder what your use case is.