Input.select "format" option returns "object text" when given html input.

Community Help
1

I’m trying to format the text of the Inputs.select function with the format option, however I cannot use html as the input. Using the first example in the Inputs.select page:

viewof colors = Inputs.select(x11colors, 
{multiple: true, 
label: "Favorite colors", 
format: x => htl.html`${x} ...`})

produces the following:
image

The format option works fine if passed a text argument, but not with md or html…

Any suggestions?

2 
x = >htl.html`${x} ...`})

That is not valid JavaScript. Are you running this code outside of Observable?

3

Sorry, messed up the code when pasted it, but the syntax is correct on the actual notebook. Yes, it’s running on observable, tested on the page that I linked.

5

Right, sorry, I glanced over the fact that this is a select input. What you’re seeing there is the browser coercing the Text node to a string. Selects can only have string labels.

6

Oh ok. My bad, the documentation seems to say so as well. Somehow I missed it.

Is there any way around this?

7

There are some libraries that emulate selects and allow for rich customizations. I’m not sure that they are worth the effort though, and I think only few of them (if any) support multiple rows that look like native selects.

Perhaps you can use checkboxes instead?