# Rich Text Box Option?

**URL:** <https://community.thunkable.com/t/rich-text-box-option/1940305>\
**Category:** Feature Requests\
**Tags:** beginner\
**Created:** [June 25, 2022, 9:47pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305 "2022-06-25T21:47:02Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![mbritt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mbritt/32/43885_2.png) [@mbritt](https://community.thunkable.com/u/mbritt)\
**Post date:** [June 25, 2022, 9:47pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/1 "2022-06-25T21:47:02Z")

</div>

I’m a little surprised at something: I want to put two short paragraphs of instructions on a page in my app and the text includes a word I want to bold and a short bullet list. I don’t see a “rich text” component among the options, which seems odd. The Label component doesn’t allow for rich text. How would I accomplish what I want to do here?

Appreciate the help,

Michael

---

<div class="post-metadata">

**Author:** ![hatmanactions](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/hatmanactions/32/134611_2.png) [@hatmanactions](https://community.thunkable.com/u/hatmanactions)\
**Post date:** [June 25, 2022, 11:26pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/2 "2022-06-25T23:26:58Z")

</div>

Hi mbritt,  
Maybe some workaround will be WebViewer component with setting URL of it to HTML data representing what you want to see. Here is a little example of code for that:

```auto
data:text/html,
<!DOCTYPE html><html><meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><body>
   <p style="width:100%;">Here is the <strong>example</strong> text:
      <li>point1
      <li>point2
      <li>point3
   </p>
</body></html>

```

You can put this code in your application line by line (as I pasted it here) using the join text or on one line with text.  
Later if you want to make changes to the HTML data, you can do so using for example with replace text. Below is example of blocks for that:

 ![example](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/6/e/6eff6cc1d10c9040b7b2f04d446091c7d4403781.png)

---

<div class="post-metadata">

**Author:** ![paulovaz72](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/paulovaz72/32/119071_2.png) [@paulovaz72](https://community.thunkable.com/u/paulovaz72)\
**Post date:** [June 25, 2022, 11:28pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/3 "2022-06-25T23:28:55Z")

</div>

I suggest to change the category of this post to “feature request”, because Thunkable has no support for this type of label formatting unfortunatelly.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 27, 2022, 7:44pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/4 "2022-06-27T19:44:30Z")

</div>

> [@mbritt](#):
>
> How would I accomplish what I want to do here?

The easiest way is to use a text character changer such as [Tools](https://yaytext.com/emoji/tools/)

* * *

> [@hatmanactions](#):
>
> setting URL of it to HTML data representing what you want to see

This is not supported by iOS.

---

<div class="post-metadata">

**Author:** ![mbritt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mbritt/32/43885_2.png) [@mbritt](https://community.thunkable.com/u/mbritt)\
**Post date:** [June 27, 2022, 7:51pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/5 "2022-06-27T19:51:37Z")

</div>

Thanks for verifying this. I put HTML text into the Label component as @hatmanactions suggested and it looks great on the laptop, but on my iphone it’s just a white block with nothing in it. Darn… Going to try his suggestion above using blocks.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 27, 2022, 8:04pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/6 "2022-06-27T20:04:46Z")

</div>

Type the text you want using [YayText](https://yaytext.com/emoji/tools/) which will give you the appearance you are looking for as long as it is a static text.

---

<div class="post-metadata">

**Author:** ![mbritt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mbritt/32/43885_2.png) [@mbritt](https://community.thunkable.com/u/mbritt)\
**Post date:** [June 27, 2022, 8:28pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/7 "2022-06-27T20:28:31Z")

</div>

Hmm. I do want to use static text and I’m looking at the YayText page, but I don’t see how this would address the issue. It seems to create all kinds of interesting/unique versions of your text, but not sure I need that. Maybe I don’t get what you’re suggesting.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 27, 2022, 8:35pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/8 "2022-06-27T20:35:48Z")

</div>

See my **Make Bold** project  
[https://x.thunkable.com/projectPage/608cf1340e1771001116dbd1](https://x.thunkable.com/projectPage/608cf1340e1771001116dbd1)

Sample output  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/4/9/49c30a8c9fd6fe43ff074f15082e2d16fe2d3382.png)

---

<div class="post-metadata">

**Author:** ![mbritt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mbritt/32/43885_2.png) [@mbritt](https://community.thunkable.com/u/mbritt)\
**Post date:** [June 27, 2022, 9:50pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/9 "2022-06-27T21:50:33Z")

</div>

Interesting and very impressive!

---

<div class="post-metadata">

**Author:** ![zander](https://avatars.discourse-cdn.com/v4/letter/z/ecb155/32.png) [@zander](https://community.thunkable.com/u/zander)\
**Post date:** [June 27, 2022, 11:25pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/10 "2022-06-27T23:25:46Z")

</div>

This is super cool and I might use this! However this only works for same colour labels. However something like the below is currently not possible on thunkable.

```auto
This is super cool and I might use this! However this only works for same colour labels. Like if I wanted something like this Hello my name is zander"

```

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 28, 2022, 3:44am UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/11 "2022-06-28T03:44:19Z")

</div>

See my other project demo in the older UI (StP)  
[https://x.thunkable.com/projectPage/6120f1399a4679001179829a](https://x.thunkable.com/projectPage/6120f1399a4679001179829a)

In this demo you can paste any paragraph and then choose the normal color and the highlighted words’ color with the ability to choose the highlighted words from the paragraph.

Have Fun

---

<div class="post-metadata">

**Author:** ![mbritt](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mbritt/32/43885_2.png) [@mbritt](https://community.thunkable.com/u/mbritt)\
**Post date:** [July 6, 2022, 5:00pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/12 "2022-07-06T17:00:13Z")

</div>

@muneer You’re clearly pretty darn good at this, but your examples all require the user to press a button to see the highlighted text. Is there any way you can think of where the text just appears on the page with the highlights pre-determine?

Michael

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [July 6, 2022, 7:40pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/13 "2022-07-06T19:40:25Z")

</div>

> [@mbritt](#):
>
> Is there any way you can think of where the text just appears on the page with the highlights pre-determine?

Yes there is. Create your own `text parser`.

**[Update]**

As a proof of concept, I have modified the **Make Bold** project to include an `Input_text` component that you can type and will see the result in the label below. I have chosen the **`<b>`** to start the bold letters and then another **`<b>`** to go back to normal letters.

See the project  
[https://x.thunkable.com/projectPage/608cf1340e1771001116dbd1](https://x.thunkable.com/projectPage/608cf1340e1771001116dbd1)

See sample output

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/5/15d5334a5cedc86c5a22bd192a1ef9dd27b9153b.png)

Remember, this is only a `Proof of Concept`, so you should expect errors in it and you should not use it in your app without testing it.

CC:  
@tatiang  
@jared  
Let me know what you think.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [October 4, 2022, 7:40pm UTC](https://community.thunkable.com/t/rich-text-box-option/1940305/14 "2022-10-04T19:40:42Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.