MenuItemCheckbox

Rendering a dropdown Menu using the MenuItemCheckbox component with the values and setValues props from MenuProvider to control the checked items.

Menu Dropdowns Abstracted examples

Edit example

12345678910111213141516171819202122232425262728293031
import { useState } from "react";
import { Menu, MenuItemCheckbox } from "./menu.tsx";
import "./style.css";

export default function Example() {
  const [values, setValues] = useState({ watching: ["issues"] });
  return (
    <Menu
      label={values.watching.length ? "Unwatch" : "Watch"}
      values={values}
      onValuesChange={(v: typeof values) => setValues(v)}
    >
      <MenuItemCheckbox name="watching" value="issues">
        Issues
      </MenuItemCheckbox>
      <MenuItemCheckbox name="watching" value="pull-requests">
        Pull requests
      </MenuItemCheckbox>
      <MenuItemCheckbox name="watching" value="releases">
        Releases
      </MenuItemCheckbox>
      <MenuItemCheckbox name="watching" value="discussions">
        Discussions
      </MenuItemCheckbox>
      <MenuItemCheckbox name="watching" value="security-alerts">
        Security alerts
      </MenuItemCheckbox>
    </Menu>
  );
}

import { useState } from "react";
import { Menu, MenuItemCheckbox } from "./menu.tsx";
import "./style.css";

export default function Example() {
  const [values, setValues] = useState({ watching: ["issues"] });
  return (
    <Menu
      label={values.watching.length ? "Unwatch" : "Watch"}
      values={values}
      onValuesChange={(v: typeof values) => setValues(v)}
    >
      <MenuItemCheckbox name="watching" value="issues">
        Issues
      </MenuItemCheckbox>
      <MenuItemCheckbox name="watching" value="pull-requests">
        Pull requests
      </MenuItemCheckbox>
      <MenuItemCheckbox name="watching" value="releases">
        Releases
      </MenuItemCheckbox>
      <MenuItemCheckbox name="watching" value="discussions">
        Discussions
      </MenuItemCheckbox>
      <MenuItemCheckbox name="watching" value="security-alerts">
        Security alerts
      </MenuItemCheckbox>
    </Menu>
  );
}

Components

MenuAccess a set of commands within a dropdown menu. This component is based on the WAI-ARIA Menu Pattern and the WAI-ARIA Menu Button Pattern.

View all components

Controlling the state with props

In this example, we created a higher-level abstraction of the Menu component that accepts the values and onValuesChange props to control the state of the menu store. These props are then passed to the MenuProvider component:

<MenuProvider values={props.values} setValues={props.onValuesChange}>
<MenuProvider values={props.values} setValues={props.onValuesChange}>

You can leverage this technique to create your own custom menu components tailored to your specific requirements. Learn more about controlling the state on the Component providers guide.

Related examples

SubmenuRendering nested Menu components to create a dropdown menu with submenus that open when hovering over the parent menu item.

Menu with TooltipRendering Menu with a Tooltip that appears when hovering over the MenuButton component by combining it with the TooltipAnchor component.

Menu with Framer MotionAbstracting Menu into a reusable dropdown menu component that uses Framer Motion to create smooth initial and exit animations.

View all examples

MenuItemCheckbox

Components

Controlling the state with props

Related examples

Stay tuned