Headless UI v1.6: Apa yang Baru dan Bagaimana Menggunakannya

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>
  )
}

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>
	...

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

• Selecting multiple values
• Allowing empty values

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