Material-design-lite: [Component Request] Chips

[janpieterz]

Chips represent complex entities in small blocks, such as a contact. They can contain a photo, short title string, and brief information.

https://www.google.com/design/spec/components/chips.html

I for example have a use case where I'd have a list of users and/or user groups and multiple selections would be possible, very similar to a To field.

[FPGL]

Hi,
Regarding #877. There is also an "Auto-complete text field" in the specs:
https://www.google.com/design/spec/components/text-fields.html#text-fields-auto-complete-text-field
The main differences seems to be the pop-in over the text field and the selected state on the element.
The first one helps to compose a list of items, the second seems to be a simple helper to compose a text query.

[vdclouis]

+1
we could easily port this from https://material.angularjs.org/latest/#/demo/material.components.chips no?

[Garbee]

We are not interested in "easy ports" or ports of any kind from other implementations. They may not adhere to the spec fully.

The project is open to PRs if someone wants to try and take this on outside of the core team. Otherwise, it will be gotten to as someone has time and wants to take it on.

[scottsmeester]

+1

What is a good way to allow a user to select one or many items from a long list (I want the user to see the list, not guess)?

[raphaelsavina]

+1

I need chips to represent keywords to be selected by users. I will likely try to create them until a better version is implemented.

[matheuscscp]

+1

I need chips to input tags, like stack overflow tags.

[brynnbp]

+1 for the same reason as matheuscscp

[dgrubelic]

What is the status here? Anyone currently working on this one?

[Sungodragon]

This is an invaluable component.
Users may press the delete icon or use the keyboard “Delete” button to remove a chip.
https://www.google.com/design/spec/components/chips.html#chips-behavior
I hope this gets released in before 2.X for current implementation.

[dgrubelic]

I believe that @timurtu said last night he's gonna start working on chips. When, i don't know.

[timurtu]

soon @dgrubelic

[dgrubelic]

Hey @timurtu, any progress on this one?

[timurtu]

Hey sorry I haven't started but I will look at the source code to see the
way elements are being done and start on it.

On Fri, Apr 15, 2016 at 4:16 AM Davor Grubelić [email protected]
wrote:

Hey @timurtu https://github.com/timurtu, any progress on this one?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/google/material-design-lite/issues/857#issuecomment-210351419

[timurtu]

@dgrubelic I'm blocked by quite a few errors, "Requiring external module babel-register", node-gyp won't rebuild, and TO-DO comments, any workarounds for these? thanks

[b-kelly]

Just submitted a PR for the chip component, since I already had about 90% of it in my personal project and @timurtu seems to be having some problems building the project.

Also, Hi @timurtu ! You don't know me by my github username, but I'm the guy that on-boarded you at your previous employer (and who you sat next to). Small world!

[timurtu]

@b-kelly haha cool hey Ben

[pedroadame]

+1

Need the autocomplete text field.

[sgomes]

Implemented in #4386.

[juanpmarin]

Hi, I can't find an implementation of a input of chips, like the Materialize's implementation, someone has it ? Thaks :D

[Garbee]

@juanpmarin-infocorp that is something you need to build on your own using the chips and textfield components.

[manuel-84]

for who are looking for autocomplete: http://immybox.js.org/

[timurtu]

ew jQuery

On Oct 6, 2016, at 2:00 PM, Manuel [email protected] wrote:

for who are looking for autocomplete: http://immybox.js.org/ http://immybox.js.org/
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/google/material-design-lite/issues/857#issuecomment-252040757, or mute the thread https://github.com/notifications/unsubscribe-auth/AEPHnET1l0TQ3c3SmNCfgLeIWwB2krAhks5qxTdPgaJpZM4FUOcJ.

[masaeedu]

@Garbee Is there a standard container the chips are supposed to go into, or do we need to deal with spacing and layout for the chips ourselves? The snippets in the docs only show how to render individual chip elements.

[Garbee]

It is up to developers on all the implementation details. We simply provide the chip UX as its own isolated component.

[marcfielding1]

Just a quick comment on this, virtually every other implementation of chips works with a text input out of the box, whilst I love MDL it seems like a bit of a shorcut leaving this out. That being said since I HAVE to create my own implementation I could create PR unless anyone else is working on one?