Add chips

[davidm49090]

I know this has been nixed a few times, but the time is right to add chips to the UI toolbox. Would make life a lot easier for forms development.

https://material.io/components/chips

[mdo]

Just the HTML and CSS, or JS to go with it for specific implementations?

[davidm49090]

Thank you for the fast reply.

HTML and CSS would be great, but as long as it plays nicely with jQuery I would be happy.

An ideal solution would be one that would store an ID, so that you could have a contact chip that displays the person's name while holding their email address.

[davidm49090]

You could make this my birthday and Christmas gift this year.

[leandroruel]

i believe the "close" button needs JS and looks like he works as a checkbox like buttons with toggle state

[klutchdev]

Is there anything I can do to help? Or is this all under control? Awesome idea!

[davidm49090]

Just the HTML and CSS, or JS to go with it for specific implementations?

I know you have a lot of other components to focus on right now, but I'd love to find this under the Christmas tree.

[prikeshsavla]

So Chip Style Icon on the front Text label optional close button/icon optional checkbox state?

[davidm49090]

So Chip Style Icon on the front Text label optional close button/icon optional checkbox state?

Yes! I think that's it.

[prikeshsavla]

I think I can work on that.

[AgentSmith0]

Any updates to this?

[prikeshsavla]

I couldn't do it. Can someone else take it up

[jovitorrevillas]

Had a go at making what could be the design document for the chip component.

Chip

Design

Properties

Color

<span class="chip bg-primary">Primary</span>
<span class="chip bg-secondary">Secondary</span>
<span class="chip bg-success">Success</span>
<span class="chip bg-danger">Danger</span>
<span class="chip bg-warning text-dark">Warning</span>
<span class="chip bg-info text-dark">Info</span>
<span class="chip bg-light text-dark">Light</span>
<span class="chip bg-dark">Dark</span>

Variant

<chip class="chip chip-outline-primary">Primary</chip>
<chip class="chip chip-outline-secondary">Secondary</chip>
<chip class="chip chip-outline-success">Success</chip>
<chip class="chip chip-outline-danger">Danger</chip>
<chip class="chip chip-outline-warning">Warning</chip>
<chip class="chip chip-outline-info">Info</chip>
<chip class="chip chip-outline-light">Light</chip>
<chip class="chip chip-outline-dark">Dark</chip>

Shape

<span class="chip">Primary</span>
<span class="chip chip-rounded">Primary</span>

Size

<span class="chip chip-primary chip-lg">Large chip</span>
<span  class="chip chip-secondary chip-lg">Large chip</span>

<span class="chip chip-primary">Default chip</span>
<span class="chip chip-secondary">Default chip</span>

<span class="chip chip-primary chip-sm">Small chip</span>
<span class="chip chip-secondary chip-sm">Small chip</span>

Usage

With icon

<span class="chip chip-primary">
 <i class="bi bi-emoji-smile"></i>
 Primary
</span>

Closable

<span class="chip chip-primary">
 Primary
 <i class="bi bi-x-circle"></i>
</span>

With icon and closable

<span class="chip chip-primary">
 <i class="bi bi-emoji-smile"></i>
 Primary
 <i class="bi bi-x-circle"></i>
</span>

Selectable

<span class="chip chip-primary chip-selected">
 <i class="bi bi-envelope-fill"></i>
 Primary
 <i class="bi bi-x-circle"></i>
</span>

<span class="chip chip-primary">
 <i class="bi bi-envelope-fill"></i>
 Primary
 <i class="bi bi-x-circle"></i>
</span>

With link

<span class="chip chip-primary">
 <i class="bi bi-envelope-fill"></i>
 Primary
 <a href="/" style="color: inherit;">View Item</a>
 <i class="bi bi-x-circle"></i>
</span>

[Pulkit0729]

Hey @mdo , i would like like give this a try. Please tell me that this is still needed.

[davidm49090]

Love the design work so far... my only comment is that chips should have a container so that they wrap. The container should also have an option for placeholder text. Like if a person is typing, the inputs can be added as chips.