Ariakit
/

Select Grid

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

Position
import * as Ariakit from "@ariakit/react";
import { useState } from "react";
import Square from "./square.tsx";
import "./style.css";
export default function Example() {
const [value, setValue] = useState("Center");
const select = Ariakit.useSelectStore({ value, setValue });
const renderItem = (value: string) => (
role="gridcell"
value={value}
className="select-item"
focusOnHover={(event) => {
// When the mouse leaves the item, we don't want to unset the active
// item.
if (event.type === "mouseleave") return false;
// By default, hovering over an item doesn't focus it, nor does it set
// the value. So we need to manually "move" to the item so it gets
// focused and the value is set.
select.move(event.currentTarget.id);
return true;
}}
>
);
return (
<div className="wrapper">
<Ariakit.Select showOnKeyDown={false} className="button">
<Square value={value} />
{value}
<Ariakit.SelectPopover role="grid" className="popover">
<Ariakit.PopoverArrow className="arrow" />
<Ariakit.SelectRow className="row">
{renderItem("Top Left")}
{renderItem("Top Center")}
{renderItem("Top Right")}
<Ariakit.SelectRow className="row">
{renderItem("Center Left")}
{renderItem("Center")}
{renderItem("Center Right")}
<Ariakit.SelectRow className="row">
{renderItem("Bottom Left")}
{renderItem("Bottom Center")}
{renderItem("Bottom Right")}
</div>
);
}

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue