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

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?

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

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

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.

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.

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

Is there any way around this?

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?