# Raw html as value of component
**URL:** \
**Category:** Dash Python\
**Created:** [December 11, 2017, 3:33am UTC](https://community.plotly.com/t/raw-html-as-value-of-component/7250 "2017-12-11T03:33:51Z")\
**Posts on this page:** 6\
**Page:** 1
Hello,
Is it possible to easily insert content (children of a dash component) with raw html embedded?
I’m trying to insert raw html into a `
` html component. In particular, my use-case is to display text that has embedded `'\n'` characters as paragraph separators.
I tried to replace `\n` with `` with no luck, and was only able to implement by replacing the text with the dash components required to split the sentences and intersperse with `html.P`'s. While this works for this simple use-case, there can be others cases where simple raw html may be useful.
This example below shows the case of: (1) text with `\n` embedded, (2) text with `\n` replaced with ``, and (3) [work around] converting the text into dash components:
```auto
from more_itertools import intersperse
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash()
app.css.append_css({
'external_url': 'https://codepen.io/chriddyp/pen/dZVMbK.css'
})
app.layout = html.Div([
html.Button('Submit', id='button'),
html.Div(id='output')
])
content1 = 'This is sentence 1.\nAnd this is sentence two.\nFinally three.'
content2 = 'This is sentence 1.And this is sentence two.Finally three.'
def make_content_with_paragraphs(content):
cwp = html.Div(list(intersperse(html.P(), content.split('\n'))))
return cwp
@app.callback(
Output('output', 'children'),
[Input('button', 'n_clicks')])
def output(n_clicks):
if n_clicks % 3 == 0:
return 'Example 1: (embedded "\\n"): ' + content1
elif n_clicks % 3 == 1:
return 'Example 2: (embedded ""): ' + content2
else:
return html.Div(['Example 3: (converting to dash components): ',
make_content_with_paragraphs(content1)])
if __name__ == ' __main__':
app.run_server(debug=True)
```
Thanks.
---
> [@bkelemen](#):
>
> While this works for this simple use-case, there can be others cases where simple raw html may be useful.
Sometimes the `dcc.Markdown` component can be helpful in the text is simple (e.g. new lines). As a last resort, you can use the `dash-dangerously-set-inner-html` component to render raw html [GitHub - plotly/dash-dangerously-set-inner-html: Dash component to dangerously set inner raw HTML](https://github.com/plotly/dash-dangerously-set-inner-html)
---
> [@gaw89](#):
>
> Is there a way to add a callback to an element created by DangerouslySetInnerHTML?
There is not, only the top level properties of dash components can be inputs of callbacks
---
Thanks for the quick reply!
The reason I was asking is that I am trying to use Materialize CSS framework with Dash. For checkboxes, it needs the label text to be inside a span as seen below:
```
```
However, the HTML that is generated by Dash using dcc.Checklist is (without the span):
```
```
Is there a way to get the label text to be inside a span? I could make a very hacky solution with some custom JS, but is there a better way?
Thanks!
---
> [@gaw89](#):
>
> Is there a way to get the label text to be inside a span? I could make a very hacky solution with some custom JS, but is there a better way?
You could write your own checklist component: [Build Your Own Components | Dash for Python Documentation | Plotly](https://dash.plot.ly/plugins) and pull out the code from the open source Checklist