ALT Writing code to test a textarea field with suggestion popups and showing how the UI would respond to that.

ALT Filling in a textarea field with the help of popups with suggestions when the "at" (users), "hash" (issues), or "colon" (emoji) characters are typed.

ALT Interacting with a textarea element that opens a combobox popup after typing the @ character. The popup size and position are automatically adapted when scrolling the textarea contents.

ALT Writing on a textarea element: "Thanks @daniguardio_la and @itsJonQ for the feedback! cc @sseraphini". When typing the @ character, a combo box popup opens so the username can be chosen.

ALT Showing how a menu bar's position and dimensions change based on the screen size.

ALT Using a toolbar widget with a custom select widget using mouse and keyboard

ALT Opening a custom context menu component with a right click.

ALT Showcase of a custom select component in different contexts.

ALT Using a multi-selectable combo box widget.

ALT Interacting with a login form with email and password inputs and a role input as a custom select element. Then using 1password to autofill the values.

ALT Coding a custom Select component within a Form component with automatic error handling.

ALT Building a dropdown menu component with a search field using Ariakit components such as Menu, MenuButton, Combobox, and ComboboxItem.

ALT Using a menu bar similar to the macOS one in dark mode using the mouse and the keyboard.

ALT Trying to reach a submenu in a dropdown menu and failing because we hover over another menu item. Then we fix it by checking if the mouse is moving toward the submenu.

ALT Building a dropdown menu using nested Menu and MenuItem components

ALT A white screen with the text "Focus on @ariakitjs using the keyboard to see the disclosure button." Then it demonstrates how to show the card with both the mouse and the keyboard.