How can you display comma separated text as chips?

[Butter-Bee]

I love the look of the Chips layout. I’m curious if there is way to display static text, that shouldn’t change in this chips format.

The use case for this is:

• I’ve got a set of users who are picking interests to be associated with their profile. Instead of having those interests be displayed on their profile in a big block of comma separated text. I’d love to have those interests displayed in the Chips layout to be viewed by others.

Is there anyway to do this without letting that original interest data be changed?

[Darren_Murphy]

yeah, that would be possible, I think.

Just thinking out aloud here…

• Take your comma separated list and transpose that into a vertical list using the row index->array->single value method
• Then use that as the source for the choice component
• You’ll need to target it at something, so just create a “dummy” user specific column for that
• Users will be able to tap on the chips, and they’ll change colour, but none of the underlying data will change
• You’d probably need to set it up in such a way that the vertical list is generated every time the user views their profile

[ThinhDinh]

Adapting from Darren’s method.

CSS to change its background and prevent the chips from being clicked.

<pre><span><style>

.current .display-item {
background: rgba(0, 0, 0, 0.05) !important;
color: black !important;
font-weight: 400 !important;
}

.current {
pointer-events: none !important;
}

For this choice component, I filter out only choices that are already chosen (since those are the only things we want to display).

Copyable app:

Interests Chip

[Darren_Murphy]

haha, that was quick!
I was going to have a play with this one after I have my breakfast, you’ve saved me the trouble, haha

[Robert_Petitto]

Nice @Darren_Murphy Darren. This is what I’d do as well…probably possible with CSS to prevent clicking altogether using pointer-events: none; You’ll probably need to target the component on the screen using order rather than class name because the choice component doesn’t have a named class to reference.

[Robert_Petitto]

Hah… @ThinhDinh and I think alike

[Butter-Bee]

@Robert_Petitto @Darren_Murphy @ThinhDinh Y’all are amazing thank youuuuuu!