Toolbar with Select
Rendering Select as a ToolbarItem
inside a Toolbar.
import "./style.css";
import { useState } from "react";
import * as Ariakit from "@ariakit/react";
import * as icons from "./icons.jsx";
const options = [
{ value: "Align Left", icon: icons.alignLeft },
{ value: "Align Center", icon: icons.alignCenter },
{ value: "Align Right", icon: icons.alignRight },
];
export default function Example() {
const [value, setValue] = useState("Align Left");
const selectedIcon = options.find((option) => option.value === value)?.icon;
return (
{icons.bold} Bold
{icons.italic} Italic
{icons.underline} Underline
aria-label="Text alignment"
className="button secondary"
>
{options.map((option) => (
key={option.value}
className="select-item"
>
{option.icon} {option.value}
))}
);
}
Components
ToolbarGroup a set of related controls, reducing the number of tab stops in the keyboard interface. This component is based on the WAI-ARIA Toolbar Pattern.
SelectSelect a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.
Composing Select
and ToolbarItem
In this example, we use the render
prop to combine Select
and ToolbarItem
into a single element:
You can learn more about this pattern on the Composition guide.
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Examples.