ALT Using a dropdown menu that displays a tooltip when hovering or focusing on menu items.

ALT Programming and testing with mouse and keyboard a dropdown menu widget. The state is provided through the useMenuState hook imported from the Ariakit package, and the components are MenuButton, MenuButtonArrow, Menu, MenuItem, and MenuSeparator. The code uses React and JSX.

ALT Using a custom 3x3 select grid component with the mouse and keyboard to control the position of a black text inside a yellow background.

ALT Resizing the window to the point where a custom select dropdown becomes a modal dialog

ALT Showing a custom select element and a native select element. When the value of one changes, the other is automatically updated.

ALT Using a single-select element. Then, changing its default value from a string to an array of strings immediately turns the element into a multi-select.

ALT Using a custom select component with mouse and keyboard

ALT Programming a hovercard component similar to the Twitter one with more information about a user. Testing the component with the mouse by hovering over the username anchor, and then with keyboard, by clicking on a disclosure button that appears when the username anchor receives keyboard focus.

ALT Using a custom select element labeled as "Account". The value has the selected user's photo, name, and email address. When the Select is open, there are two account options and a third option to add another account. When the third option is activated, a dialog opens with an input labeled as "Email". Once the form is submitted, the dialog closes and the focus moves back to the Select element with the newly added user as the value. Opening the Select popup again will also show the newly added user.

ALT Using a custom select component with a search field with mouse and keyboard.

ALT Using a custom select component using the mouse and the keyboard (arrow keys and characters).

ALT Programming a multi-select combo box in a time-lapse using React

ALT Programming a popover component that turns into a modal dialog on small screens.

ALT importing Popover components from "ariakit/popover" and using them in a React function component to create a popover UI.

ALT Creating array fields with the Ariakit Form component.

ALT Coding a Form component by importing components from the ariakit package. The form has one field (name) with a label. Then, a field error element is added. Finally, a submit handler is added.