Headless UI v1.6 Telah Keluar

Dalam artikel ini kita akan membahas apa yang terbaru pada Headless UI diversi 1.6 ini, mungkin kalian sudah sering menggunakan yang namanya `Combobox`, tetapi apalah daya, selama ini komponen ini tidak mendukung yang namanya multiselect.

1 min read

Published on 29 May, 2022 (updated: 02 Oct, 2022)

Written by Irsyad A. Panjaitan

Fill in Headless UITailwind CSSJavascript

ArticlesHeadless UI v1.6 Telah Keluar

Dalam artikel ini kita akan membahas apa yang terbaru pada Headless UI diversi 1.6 ini, mungkin kalian sudah sering menggunakan yang namanya Combobox, tetapi apalah daya, selama ini komponen ini tidak mendukung yang namanya multiselect.

Tetapi pada update kali ini, dia sudah mendukung yang namanya multiselect. Kita tinggal menambahkan multiple pada props nya, kemudian masukkan array kedalam value Combobox dan kita akan mendapatkan hasil multipe layaknya select2.

Berikut adalah contoh komponen yang mungkin bisa Anda gunakan dalam menggunakan multiselect ini.

function MyCombobox({ items }) { const [selectedItems, setSelectedItems] = useState([]) return ( <Combobox value={selectedItems} onChange={setSelectedItems} multiple> {selectedItems.length > 0 && ( <ul> {selectedItems.map((item) => ( <li key={item}>{item}</li> ))} </ul> )} <Combobox.Input /> <Combobox.Options> {items.map((item) => ( <Combobox.Option key={item} value={item}> {item} </Combobox.Option> ))} </Combobox.Options> </Combobox> ) }
jsxCopy

Tidak cukup hanya dengan multiselect, combobox sekarang juga bisa menerima nullable value, dulu nya, ketika state yang aktif tidak ada, maka dia akan menggunakan selected state sebelumnya, tapi mungkin kita ingin combobox tersebut kosong. Untuk itu Anda bisa menambahkan yang namanya nullable pada props nya seperti ini.

<Combobox value={selectedItems} onChange={setSelectedItem} nullable> ...
jsxCopy

Untuk source lebih lanjut, Anda bisa lihat pada dokumentasi resmi nya.

Jika bermanfaat, Anda bisa tekan tombol share. Thanks for reading :)

Irsyad A. Panjaitan

Let's start living like no one can help us in any event, so that when we are helped in certain times, it becomes a plus in itself.
3

Share on