This site is under construction Subscribe to updates

Examples

MIT licensed examples using Ariakit components in several real-world use cases. Copy and paste the code or use it as a reference to learn more about Ariakit, accessibility, or to build your components from scratch.

Checkbox

Checkbox as buttonRendering a custom Checkbox as a button element in React, while keeping it accessible to screen reader and keyboard users.

Controlled CheckboxUsing controlled props, such as checked and onChange, with a native Checkbox component in React.

Custom CheckboxRendering a visually hidden Checkbox using the VisuallyHidden component to show a custom checkbox presentation in React.

Checkbox groupRendering multiple Checkbox elements in React to form a group of checkboxes. The selected values are stored in an array provided by the useCheckboxState hook.

useCheckboxStateUsing the useCheckboxState hook to control the state of the Checkbox component.

Combobox

Animated ComboboxAnimating a Combobox using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

ComboboxCancelReseting the value of a Combobox with a button rendered next to it using the ComboboxCancel component.

ComboboxDisclosureOpening and closing a Combobox with the help of a button rendered next to it using the ComboboxDisclosure component.

ComboboxGroupOrganizing combobox items into labelled groups using the ComboboxGroup and ComboboxGroupLabel components in React.

Combobox with linksUsing a Combobox with items rendered as links that can be clicked with keyboard and mouse. This is useful for creating an accessible page search input in React.

Filterable ComboboxFiltering the suggestions in a Combobox using the list prop from the useComboboxState hook.

Multi-selectable ComboboxCombining Combobox and Select to create an accessible multi-selectable search input in React.

Textarea with inline ComboboxRendering Combobox as a textarea element to create an accessible multiline textbox in React. Inserting specific characters triggers a popup with dynamic suggestions.

Dialog

Animated DialogAnimating a modal Dialog and its backdrop using CSS. The component waits for the transition to finish before completely hiding the dialog or removing it from the React tree.

Dialog with details & summaryCombining Dialog with the native details element in React so users can interact with it before JavaScript finishes loading.

Dialog with React RouterUsing React Router to create a modal Dialog that's triggered with a link and works with the browser's back and forward buttons.

Form

Form with SelectCombining Select and FormField to create an accessible custom select widget that works with the browser's built-in validation and native form submission.

Hovercard

Hovercard with keyboard supportUsing the HovercardDisclosure component to render a Hovercard that can be opened with the keyboard.

Popover

Responsive PopoverOverwriting the default Popover positioning styles on small screens using the renderCallback prop from usePopoverState.

Selection PopoverShowing an inline Popover when a text is selected. This example uses the getAnchorRect prop from usePopoverState to position the flyout relative to the selected text.

Standalone PopoverAbstracting the Popover component so that it can be used without PopoverDisclosure or PopoverAnchor. This example uses the getAnchorRect prop from usePopoverState to determine the position of the popup.

Select

Animated SelectAnimating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

Select with ComboboxCombining Select and Combobox to create a dropdown with a search field that can be used to filter items.

Select GridUsing Select with SelectPopover rendered with the grid role to create a bidimensional list of selectable items.

SelectGroupSeparating Select items into groups using the SelectGroup and SelectGroupLabel components.

Select with custom itemsRendering Select with a custom styled value and SelectItem's children.

Multi-SelectAllowing the Select component to select multiple values by passing an array to the defaultValue prop on the useSelectState hook.

Tab

Tab with React RouterUsing React Router to create Tab links controlled by the browser history, including the back and forward buttons.

Toolbar

Toolbar with SelectRendering Select as a ToolbarItem inside a Toolbar.