Skip to Content
Components
PillMenu ALPHA

PillMenu

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

Source

#

Documentation

"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

addonAfter

Display content inside the button after children.

ReactNode

addonBefore

Display content inside the button before children.

ReactNode

appearance

Control the appearance by selecting between the different button types.

"default" | "danger" | "primary" | "subtle" | "danger-outline" | "default-opal" | "inverse" | "primary-opal"

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

disabled

Whether the button is disabled.

false | true

icon

Display an icon before or after the button content or omit children to only show the icon.

ReactNode

iconPosition

Control whether to show the icon before or after the button content.

"end" | "start"

loading

Whether to show loading spinner inside the button.

false | true

size

Control the size of the button.

"sm" | "md" | "lg"

square

Whether button should have square shape.

false | true

#

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
Last updated on
Pill ALPHA
Popover