Support checkboxes in tables

[domportera]

@QuantumNeurotechno’s answer is the closest I’ve gotten to this functionality, so I decided to spruce it up a bit with a custom CSS snippet!

checkboxtable.css (1.7 KB)

To use this, just make sure your fontmatter has the cssclass: checkboxtable

I also added in a little quality of life improvement to editing these tables

So your linked markdown snippet wont make the table all wonky

I’ve never done CSS like this before so please let me know if it works for you! and thanks a million to Quantum for the immense help to make this possible

[JocelynTuohy]

+1: Please give checkboxes in tables native support!

[Harminder]

I would love to see checkboxes in tables added to Obsidian, as it would be a great way to track progress, especially on longer projects.

[renard]

+1: This would be really useful for a lot of note taking styles.

[gafsiqueira]

Hi, thanks for your answer.

But I think I do not get how you use this. I pretty dumb with this css stuff lol

Could you help on how to build a table using you example?

[ohreallyhmmm]

+1: it would be great if Obsidian recognised checkboxes in tables (and everyelse too - including inline (sorry if this is hijacking this thread)).

E.g.

table heading 1	table heading 2	table heading 3
- [ ] item	note1	note2

---

Also this:

HeadingExample - [ ] checkbox item

With this behaviour:

HeadingExample - [x] checkbox item

---

Also this:
TextExample - [ ] checkbox item

With this behaviour:
TextExample - [x] checkbox item

[tbrc]

I support this feature! Just made my account to respond to this thread!

[eujene]

would love this it be implemented natively!

[DaveL]

Definitely need this. I’m having to fake it with css and embedded html is far from pleasant.

[brooks]

Hi hello!

I’d love to see this implemented as well.

[howard000oneil]

I ran into a case where i need to mark notes to keep track and making MOCs. Using dataviewjs i can do this. However the checkbox will be cleared once load a new page, need to pin the dataview note and open marked note into new tab.

dv.table(["File"], 
    dv.pages('"Main/Permanents"')
        .where(b => cond_f(b.file.name))
        .where(b => check_orphan(b.file.inlinks))
        .sort(b => b.file.inlinks.length, 'desc')
        .map(b => ["- [ ] " + b.file.link]).limit(LIMIT))

More or my function implementation for someone curious

const LIMIT = 99999

const cond_arr = [
    "SR -", "OP -", 
    "PL -", "TS -", "BO -", "VC -",
    "HS -", "HCO -",
    "CO -", "HMOC",
    "MOC -", "MH -"
]

function cond_f(filename) {
    for (const idx in cond_arr) {
        const cond = cond_arr[idx]
        if (filename.toUpperCase().startsWith(cond))
            return false
    }
    return true
}

function check_orphan(inlinks) {
    // console.log(JSON.parse(JSON.stringify(inlinks)))
	// console.log(JSON.parse(JSON.stringify(inlinks)).values.length)

    const arr = JSON.parse(JSON.stringify(inlinks)).values
    let count = 0
    for (let i = 0; i < arr.length; i++) {
        const f = arr[i]

        if (
            f.path.toUpperCase().includes("BO - ")
            || f.path.toUpperCase().includes("MH - ")) {
                count += 1
            }
    }

    if (count == inlinks.length)
        return true

    return false
}

[nutellacrepe]

Yes, checkboxes-in-tables is the best feature of AirTable, imo (although I stopped using AirTable because of its other limitations…)

[Kani]

This feature is definitely missing!

[Jasen]

Missing it too.
But you could use also symbols: ☐ for “☐” and ☒ for “☒”
There is also cute ☑ for “”, but I can’t find its unchecked pair…

[knoll]

I can’t get any of the css solutions to work. Would love if there was some native support for this feature

[samagome]

+1 for this feature to be supported.

In the mean time I came up with this janky way to do this with no css:

1. Dowloaded the check and uncheck icons from icons8.com
2. Moved them to the attachments folder in my obsidian vault (you can add it if you do not already have this directory)
3. Renamed them to checked and unchecked for easier editing
4. Added them to my table

| Level |                         |                         |                         |                         |
| ----- | ----------------------- | ----------------------- | ----------------------- | ----------------------- |
| 1     | ![[check.png\|40x40]] | ![[uncheck.png\|40x40]] | ![[uncheck.png\|40x40]] | ![[uncheck.png\|40x40]] |
| 2     | ![[uncheck.png\|40x40]] | ![[uncheck.png\|40x40]] | ![[uncheck.png\|40x40]] |                         |

I have yet to figure out how to make the cells less bulky when an image is added but this works really well for now. Plus you can fully customize what your checkmark will look like.

[ngeshlew]

Use case or problem

I am able to draw checkbox in a plain note following these instructions from [ Markdown for Checkbox requires 6 keystrokes. Reduce it to 2?:

To create a checkbox in Obsidian’s markdown, the current implementation requires 6 keystrokes (correct me if I’m wrong, but I believe all 6 are necessary):

1. Dash
2. Space
3. Open bracket
4. Space
5. Close bracket
6. Space

Output	Formatting

I am creating a table and I would like to check off something once I’m done with it to signify it’s complete like below:

Output

The problem is that:

1. You cannot use the same process to create a checkbox that has text with it in the same line
2. You cannot create a checkbox that doesn’t have text before or after it while in a single cell in a table.

Proposed solution

Making it easy to find in the documentation of how to add a checkbox in a table or checkbox that has text before or after it.

Current workaround

I’ve experimented on a couple of solutions from Stack overflow but this response one seems to work best:

Output	Formatting

Pasting this when you want to have an enabled checkbox.

<input type="checkbox" />

Related feature requests

Markdown for Checkbox requires 6 keystrokes. Reduce it to 2?

To create a checkbox in Obsidian’s markdown, the current implementation requires 6 keystrokes (correct me if I’m wrong, but I believe all 6 are necessary): Dash Space Open bracket Space Close bracket Space It could be much less. In Notion, for example, it’s 2: Open bracket Close bracket In Roam, it’s 3: Open bracket Close bracket Space Any reason we need to have all 6? Can we support a shorter formula as well?

[LostSorcerer]

Is it possible to make the workaround persistent? At the moment, if you leave the note all the checkboxes get reset.

[Blackout]

This is not working anymore with the new versions, any solution?

[ReactionShot]

The only way I could get the workaround persistent was to manually type checked in the tag. Example below:

Unchecked: <input type="checkbox" />
Checked: <input type="checkbox" checked/>