<input/> 엘리먼트 요소에서 프리셋값을 선택하는 인터페이스를 구현할 수 있는 보조 엘리먼트인데 잘 활용하면 상당히 유용해 보인다.
자유롭게 입력하면서 몇가지 추천값을 고를 수 있는 인터페이스를 사용할 수 있다.

type=color 부분을 리서치 해보다가 우연히 알게 되었다.

점점 별도의 자바스크립트 컴포넌트를 만들 필요가 없어짐을 느끼게 되네..
최대한 네이티브 컴포넌트를 사용하면서 디자인을 좀더 다듬어서 컴포넌트를 리빌딩 해주는 방향으로 가면 좋을듯..

demo

Choose a flavor:

참고 URL
https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist