Headless UI – Unstyled, fully accessible UI components
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS. React Vue. Menu (Dropdown) · Listbox (Select).
Questions tagged [headless-ui]
154 questions
0
votes
0 answers
Using the multiple Dialog in same page throws error: There are no focusable elements inside the
I am creating a reusable Dialog modal in my application and it works fine when I use it once in my page but when I use more than once then I get the error: There are no focusable elements inside the
BATMAN_2008
- 2,788
- 3
- 31
- 98
0
votes
0 answers
How can I get the selected array index onChange in the Listbox Headless UI component?
Below is the boilerplate code for Headless UI's ListBox. I need to access the selected array index from the parent component. The Listbox value is just the selected object. I have tried using event listeners in the Listbox.Option component to listen…
M S
- 21
- 3
0
votes
0 answers
Passing a Button component as a child of Menu.Button and wrapper being a Fragment
I'm trying to pass a button component as a children of Menu.Button component from HeadlessUI the following way:
return
sunpietro
- 2,059
- 4
- 24
- 42
0
votes
0 answers
Let only dropdown component overflow be visible in an overflow-y-scroll modal
I have a modal component built with react, tailwind and headless-ui, which works fine until I add a dropdown box to it.
The issue here is that, when the dropdown is opened, it overflows within the modal, causing the modal to overflow further.
I want…
Xander Selorm
- 558
- 6
- 18
0
votes
1 answer
Is it allowed to use HeadlessUI and NuxtLabs UI together on Nuxt 3?
Just a beginner question here for nuxt developers, Is it allowed to use HeadlessUI together with NuxtLabsUI on Nuxt 3 Project? Since these two ui libraries are based on tailwindcss framework.
leouie tabique
- 36
- 7
0
votes
1 answer
HeadlessUI popover not tappable on mobile devices
I'm having a problem trying to tap on a HeadlessUI popover menu when using a mobile device or when viewing a page in the Chrome device toolbar. It seems to work fine in regular desktop browser mode. I've spent several hours testing and distilling…
cayblood
- 1,838
- 1
- 24
- 44
0
votes
0 answers
How to validate a RadioGroup with yup in NextJs
I'm using headless/ui to create a Radio Group in my form submission and using yup to validate the form. I cannot register the radio group using the usual {...register("radio-group")} so my radio group isn't part of the form validation anymore.
If I…
Robin Dalmy
- 310
- 4
- 11
0
votes
1 answer
Transition component not working for react headless ui
I'm trying to use the react headless UI library for my dropdown menu. The docs say that I can add a Transition tag to make the dropdown animate, but for some reason the transition isn't applied. See the code below:
const DropDownMenu = () => {
…
Spencer
- 13
- 4
0
votes
1 answer
React component not updating when render props used
I have a component that pulls data from a store below.
When I access the render props provided, my component state does not update when the store changes.
With render props example
When we don't use the render props it works as expected.
Without…
Matt
- 1,368
- 1
- 26
- 54
0
votes
0 answers
In Headlessui/Combobox, is there a way to reach clicked option when multiple options selected?
I have a Headlessui/Combobox. Selected items are displayed in bold font and with a tick icon in dropdown. And i am displaying these items in another component. What I want is when I click on an item that I have already selected, I want this item to…
Enes
- 145
- 9
0
votes
0 answers
React component rendering a single post in all 5 instances of the component
I fetch an array of posts from an API and then I map through the posts and pass each post to some components. One of such component is the PostComment component. The PostCard and PostActions component render the correct post for each instance.…
moody2times
- 1
- 3
0
votes
0 answers
Transition from @HeadlessUI not working properly in React + Vite
i´m having an issue when trying to use the @headlessUI transition. I´m applying it exactly as the documentation says, and the transition duration works, but not the change in opacity. Here´s the piece of code:
const [isShowing, setIsShowing] =…
Zeke Cachi
- 49
- 4
0
votes
2 answers
Headless UI Combobox Focus Behavior
I am using the Headless UI Combobox as an autocomplete search bar (React/Remix app). I would like the search bar to give up focus after the search is submitted.
On some devices (e.g. iPhone Safari) it seems to do this by default; however, on desktop…
zlach
- 3
- 2
0
votes
2 answers
How to add transition to accordion open and close
I am using headless ui and tailwind css. Currently the transition is just fading in and out when I open and close the accordion. I would like to make it slide in and out like the accordion here…
user19666029
0
votes
0 answers
React tailwind headless ui, Menu onColse action
on tailwind ui, I am using Menu. I want to add some action to close the Menu, But I am not getting any option to add a custom action to close the menu.
A.S.Abir
- 93
- 7