# Definition of checklist objects with markdown formatted labels

**URL:** <https://community.plotly.com/t/definition-of-checklist-objects-with-markdown-formatted-labels/73665>\
**Category:** Dash Python\
**Tags:** question\
**Created:** [March 17, 2023, 10:32am UTC](https://community.plotly.com/t/definition-of-checklist-objects-with-markdown-formatted-labels/73665 "2023-03-17T10:32:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![schwabts](https://avatars.discourse-cdn.com/v4/letter/s/65b543/32.png) [@schwabts](https://community.plotly.com/u/schwabts)\
**Post date:** [March 17, 2023, 10:32am UTC](https://community.plotly.com/t/definition-of-checklist-objects-with-markdown-formatted-labels/73665/1 "2023-03-17T10:32:35Z")

</div>

Hi, wanting a checklist of items that may contain clickable links I used labels with markdown text in dcc.Checklist which didn’t work, of course. The definition below **served my purpose** but I don’t dare to think of the need to define callbacks for finding which items are currently selected. Can anyone think of a better solution?

```auto
def checklist_markdown(options) -> dbc.Col:
    r''' Return html.Col() for the list of each entry of `options` mapped to
            an enumerating number,
            a checkbox, and
            a label

        Parameters:
        options=[
            {
                'label': "<markdown text representing the item in the list>",
                'id' : "<identifier to be used in callbacks>",
                'value': "<value to check for in callbacks>"
            },
            ...
        ]
    '''
    def list_item(start,total,value,label,identifier):
        r'''Return `html.Ol` object with couting starting at `number` that only contains
            one `dbc.Row` element containing
                - a one-element `dcc.Checklist` with property `id=identifier` set to `value` when clicked
                - a `dbc.Row` element that contains a `dcc.Markdown` element to process `label`

            Parameters:
            start ... to start counting in the ordered list at
            total number of all items in the list
            label markdown text representing the item in the list
            identifier ... to be used in callbacks
            value ... to check for in callbacks
        '''
        format_str = "{:" + str(len(str(total))) + "d}"
        logger.info(f'{checklist_markdown. __name__ }.{list_item. __name__ }: {format_str=},')
        label_number = dbc.Col(
            dcc.Markdown(format_str.format(start)),
            width="auto",
        )
        # logger.info
        print(f'{checklist_markdown. __name__ }.{list_item. __name__ }: using format code "{format_str=}" for displaying {start=}')
        html_checkbox = dbc.Col(
            dcc.Checklist(
                id=identifier,
                options=[{ 'label': ' ', 'value': value }],
            ),
            width=1,
        )
        label_markdown = dbc.Col(
            dcc.Markdown(label),
            width=8,
        )
        children = dbc.Row([label_number, html_checkbox, label_markdown])
        html_list_item = html.Ol(children, start = str(start))
        return html_list_item

    total = len(options)
    return dbc.Col(
        [list_item(i+1, total, options[i]['value'], options[i]['label'], options[i]['id']) for i in range(total)],
        width={"offset": 1}
    )

```

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [March 17, 2023, 10:58am UTC](https://community.plotly.com/t/definition-of-checklist-objects-with-markdown-formatted-labels/73665/2 "2023-03-17T10:58:43Z")

</div>

Hi @schwabts if you are just interested in the clickable lable, you could use `html.A()` but maybe I am missing something…

```python
app = dash.Dash( __name__ )

app.layout = html.Div([
    dcc.Checklist(
        id='check',
        options=[
            {
                'label': html.A(
                    children=f'click_{idx}',
                    href='https://dash.plotly.com/dash-html-components/a',
                    target="_blank"
                ),
                'value': idx
            } for idx in range(4)]
    )
])

if __name__ == ' __main__':
    app.run(debug=True)

```

---

<div class="post-metadata">

**Author:** ![schwabts](https://avatars.discourse-cdn.com/v4/letter/s/65b543/32.png) [@schwabts](https://community.plotly.com/u/schwabts)\
**Post date:** [March 17, 2023, 4:06pm UTC](https://community.plotly.com/t/definition-of-checklist-objects-with-markdown-formatted-labels/73665/3 "2023-03-17T16:06:49Z")

</div>

Hi [AIMPED](https://community.plotly.com/u/AIMPED),  
thank you very much for pointing this out!

However, my approach was based on pure markdown checklists using the [and] syntax which allows me to **use all other markdown formatting options, too**. Then I would simply provide `dcc.Markdown()` with the respective markdown source code.  
My problems to solve were

1. make the checkboxes clickable.
2. detect selection of checklist items.

I provided the solution to problem 1. and your example solves problem 2.  
On the other hand your example does not allow me to simply define the labels in full markdown syntax.

Can anyone think of how to solve both problems 1. and 2.?

PS: I’m sorry, for not having provided a minimal running example. I first thought using my function `checklist_markdown(options)` above as follows would be simple enough and I wanted to save time. I confirmed the function works as expected but still did not test this reduced code:

```auto
app = dash.Dash( __name__ )

app.layout = html.Div(
    [
        checklist_markdown(
                options=[
                    {
                        "label": "item 1 refers to [World Time Buddy](https://www.worldtimebuddy.com/)",
                        'id' : 'id-time',
                        "value": "weekend"
                    },
                    {
                        "label": "dummy item 2",
                        'id' : 'id-dummy',
                        "value": "dummy"
                    }
        )
    ]
)

def checklist_markdown(options) -> dbc.Col:
    r''' Return html.Col() for the list of each entry of `options` mapped to
            an enumerating number,
            a checkbox, and
            a label

        Parameters:
        options=[
            {
                'label': "<markdown text representing the item in the list>",
                'id' : "<identifier to be used in callbacks>",
                'value': "<value to check for in callbacks>"
            },
            ...
        ]
    '''
    def list_item(start,total,value,label,identifier):
        r'''Return `html.Ol` object with couting starting at `number` that only contains
            one `dbc.Row` element containing
                - a one-element `dcc.Checklist` with property `id=identifier` set to `value` when clicked
                - a `dbc.Row` element that contains a `dcc.Markdown` element to process `label`

            Parameters:
            start ... to start counting in the ordered list at
            total number of all items in the list
            label markdown text representing the item in the list
            identifier ... to be used in callbacks
            value ... to check for in callbacks
        '''
        format_str = "{:" + str(len(str(total))) + "d}"
        logger.info(f'{checklist_markdown. __name__ }.{list_item. __name__ }: {format_str=},')
        label_number = dbc.Col(
            dcc.Markdown(format_str.format(start)),
            width="auto",
        )
        # logger.info
        print(f'{checklist_markdown. __name__ }.{list_item. __name__ }: using format code "{format_str=}" for displaying {start=}')
        html_checkbox = dbc.Col(
            dcc.Checklist(
                id=identifier,
                options=[{ 'label': ' ', 'value': value }],
            ),
            width=1,
        )
        label_markdown = dbc.Col(
            dcc.Markdown(label),
            width=8,
        )
        children = dbc.Row([label_number, html_checkbox, label_markdown])
        html_list_item = html.Ol(children, start = str(start))
        return html_list_item

    total = len(options)
    return dbc.Col(
        [list_item(i+1, total, options[i]['value'], options[i]['label'], options[i]['id']) for i in range(total)],
        width={"offset": 1}
    )

if __name__ == ' __main__':
    app.run(debug=True)

```

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [March 17, 2023, 4:11pm UTC](https://community.plotly.com/t/definition-of-checklist-objects-with-markdown-formatted-labels/73665/4 "2023-03-17T16:11:14Z")

</div>

Hello @schwabts,

You could actually create something in dash\_table or AG Grid, both support Markdown, and you can make the cells selectable.

---

<div class="post-metadata">

**Author:** ![AIMPED](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/aimped/32/21758_2.png) [@AIMPED](https://community.plotly.com/u/AIMPED)\
**Post date:** [March 17, 2023, 4:31pm UTC](https://community.plotly.com/t/definition-of-checklist-objects-with-markdown-formatted-labels/73665/5 "2023-03-17T16:31:13Z")

</div>

Hmm, the label does also accept a `dcc.Markdown()` component

---

<div class="post-metadata">

**Author:** ![schwabts](https://avatars.discourse-cdn.com/v4/letter/s/65b543/32.png) [@schwabts](https://community.plotly.com/u/schwabts)\
**Post date:** [March 18, 2023, 4:17pm UTC](https://community.plotly.com/t/definition-of-checklist-objects-with-markdown-formatted-labels/73665/6 "2023-03-18T16:17:25Z")

</div>

Hi AIMPED!  
I just confirmed that, thank you so much!  
I would just have needed to note but missed the doc’s section

> **[Checklist | Dash for Python Documentation | Plotly](https://dash.plotly.com/dash-core-components/checklist#components-as-option-labels)**
>
> Checklist is a component for rendering a set of checkboxes.

However,

1. the function I provided numbered my checklist items which I had not posed as a problem to solve but I consider it “nice to have”, anyway.
2. `dcc.Markdown()` components as labels seem to **start on a new line** and extend over the full width of the browser window whereas the `dbc.Col(..., width={"offset": 1})`component that the function I provided returns is centered on the page I am working on. Simply putting the `dcc.Checklist()` inside a `dbc.Col(..., width={"offset": 1})` did indent the checklist but it is still formatted ragged right.

So I’ll keep using my function as it displays my list in a way that is more helpful for me.  
However, the posed problems are solved and your answer is therefore accepted.