PillMenu

Dropdown menu for making selection with pills showing the selected items.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage


"use client";
 
import { type MenuOption } from "@optiaxiom/react";
import {
  PillMenu,
  PillMenuContent,
  PillMenuTrigger,
} from "@optiaxiom/react/unstable";
import { useMemo, useState } from "react";
 
const colors = ["Ocean", "Blue", "Purple", "Red", "Orange", "Yellow"];
 
export function App() {
  const [value, setValue] = useState(
    colors.filter((_, index) => index % 3 === 0),
  );
 
  return (
    <PillMenu
      options={useMemo(
        () =>
          colors.map(
            (color) =>
              ({
                execute: () =>
                  setValue((values) =>
                    values.includes(color)
                      ? values.filter((v) => v !== color)
                      : [...values, color],
                  ),
                label: color,
                multi: true,
                selected: () => value.includes(color),
              }) satisfies MenuOption,
          ),
        [value],
      )}
    >
      <PillMenuTrigger>Add color</PillMenuTrigger>
      <PillMenuContent />
    </PillMenu>
  );
}

#
Props

#
PillMenu

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`defaultOpen` The initial open state in uncontrolled mode. `false \| true` Default: `false`
`empty` Custom empty state content. `ReactNode`
`inputValue` The input value in controlled mode. `string`
`inputVisible` Whether to always show the input or only if there are selectable options and/or when user starts to type. `"always" \| "if-needed"`
`loading` Whether to show loading spinner or skeleton items inside the menu. `false \| true \| "both" \| "spinner" \| "skeleton"`
`onInputValueChange` Handler that is called when input value changes. `(inputValue: string) => void`
`onOpenChange` Handler that is called when the open state changes. `(open: boolean) => void`
`open` The open state in controlled mode. `false \| true`
`options*` The items we want to render. `CommandOption[] \| readonly CommandOption[]`
`placeholder` The placeholder for the search input. `string`

#
PillMenuTrigger

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`readOnly` Whether the button is disabled. `false \| true`
`size` Control the size of the button. `"md" \| "lg"` Default: `md`

#
PillMenuContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`align` `"center" \| "end" \| "start"`
`alignOffset` `number`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`minW` Whether to set the min-width to the width of the trigger. `"0" \| "trigger"`
`onCloseAutoFocus` Event handler called when auto-focusing on close. Can be prevented. `(event: Event) => void`
`onEscapeKeyDown` Event handler called when the escape key is down. Can be prevented. `(event: KeyboardEvent) => void`
`onFocusOutside` Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented. `(event: FocusOutsideEvent) => void`
`onInteractOutside` Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. `(event: PointerDownOutsideEvent \| FocusOutsideEvent) => void`
`onOpenAutoFocus` Event handler called when auto-focusing on open. Can be prevented. `(event: Event) => void`
`onPointerDownOutside` Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented. `(event: PointerDownOutsideEvent) => void`
`side` `"bottom" \| "left" \| "right" \| "top"`
`sideOffset` `number`

#
Changelog

#
1.6.2

Added component