In this part, we are going to create a custom component as Disclosure Button. First, under the components folder, create MyLink.js import React from 'react' const MyLink = React.forwardRef(({ onClick, href }, ref) => { return ( <a href={href} onClick={onClick} ref={ref}> MyLink</a> ) }) export default MyLink Then under the…

In this part, we are going to style the open panel. First we need to install the react heroicon npm i @heroicons/react Then import the ChevronUpIcon on the top. import { ChevronUpIcon } from '@heroicons/react/solid' Then we conditionally change the state with the help of the open state. {({open})=>( <> …

After create the project with Next.js, install the headless ui and tailwind CSS. npm install @headlessui/react At the root folder, create a folder named “components”. Inside the folder, create “MyDisclosure.js”. import React from 'react' import { Disclosure } from '@headlessui/react' const MyDisclosure = () => { return ( <div className="w-full…

In this part, we are going to add the transition to the listbox. First we need to add the Transition from headless ui react import { Listbox ,Transition } from '@headlessui/react' Then we use the <Transition> component to wrap the <Listbox.Options> We copy the <Transition> component from the documentation…

In this article, we are going to use the multiple prop and pass an array to value instead of a single option. First, we set the default value as the first two person const [selectedPerson, setSelectedPerson] = useState([people[0], people[1]]) In documentation, it changed the name to selectedPeople, but for…

Part 2: Adding the active style and the CheckIcon from Heroicons — So first we need to install Heroicons npm install @heroicons/react We mainly copy the code from the documentation “Styling the active and selected option”. The others that we need to add are the style and Listbox.Option, span and li. import { useState, Fragment } from 'react' import { Listbox…

Part 1: Create a Listbox with HeadlessUI and Next.js — After we create the Next.js project, we need to install Headless UI and Tailwind CSS. Install Headless UI: yarn add @headlessui/react Install Tailwind CSS: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p Configure your template paths: module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}", …

In this part, we are going to add the Combobox button, so the user can click on it and open the dropdown menu. First we need to import the SelectorIcon from react heroicon. import { CheckIcon, SelectorIcon } from '@heroicons/react/solid' Then we put the Combobox.Button under the Combobox.Input <div…