vmware-clarity / ng-clarity

Clarity Angular is a scalable, accessible, customizable, open-source design system built for Angular.

Home Page:https://clarity.design

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Combobox: support for custom values

d-m-s opened this issue · comments

commented

Contribution desired?

Is a contribution to support custom values for the Clarity Combobox something that will get accepted?
see #171

Combobox: support for custom values

The combobox is a really helpful component, it just lacks the addition of custom values.
Whenever custom values are needed, currently the datalist is used as a replacement, but this results in inconsistent user-interfaces. Datalist also has some display issues in different browsers.
In the following usecase the datalist can not serve as replacement.

Usecase Tags/Labels

  • We're using it to add tags/labels to an object - there the multi-selection of the combobox is really great as the added items are designed as input-chips.
  • So existing tags can be added, but of course we have the necessity to create new tags, that need to be added to the list.
  • Datalist does not work as replacement as it does not support multi-selection.

Usability guidance

Currently the differentiation when to use datalist / combobox often puzzles designers/developlers and in the end of course our users.
Having the combobox supporting custom values / free text input would be a great step to unify the user interface.

Related discussion in core: vmware-clarity/core#162

I have a POC that might do what you need with the existing combobox component: https://stackblitz.com/edit/clarity-light-theme-clr16-7vvyfu?file=src%2Fapp%2Fapp.component.ts

commented

Hi Kevin, thanks for the quick reply. Is this also applicable for the multi-selection mode? So either multiple values can be added OR a new one can be entered?

I just updated the above POC with multi-selection.