Select Menu

Beta FeatureThis feature is currently in beta, and needs to be imported from @servicetitan/anvil2/beta.While we hope to minimize breaking changes, they may occur due to feedback we receive or other improvements. These will always be documented in the changelog and communicated in Slack.Please reach out in the #ask-designsystem channel with any questions or feedback!

Implementation
SelectMenu Props
SelectMenuSync Props
SelectMenuOption Type

Overview

The select menu family includes two components for different use cases:

SelectMenu — For async data loading with support for pagination (page-based, offset-based, or group-based lazy loading)
- Includes automatic debouncing of the search input (configurable via the debounceMs prop)
- Includes automatic caching of the search input (configurable via the cache prop)
SelectMenuSync — For client-side filtering of static option arrays

Both components attach a searchable dropdown to any trigger element via a trigger render prop. The menu closes after an option is selected. Use SelectMenu when you need selection behavior outside of a form field context — for example, attaching a dropdown to a button, icon, or custom element.

Looking for a form field with a built-in label, error state, and input? Use SelectField instead.

SelectMenuSync (Static Options)

Use SelectMenuSync when you have a static list of options that can be filtered client-side.

import { useState } from "react";
import { SelectMenuSync } from "@servicetitan/anvil2/beta";
import { Button } from "@servicetitan/anvil2";

const options = [
  { id: 1, label: "Option One" },
  { id: 2, label: "Option Two" },
  { id: 3, label: "Option Three" },
];

const ExampleComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectMenuSync
      label="Options"
      options={options}
      value={selectedOption}
      onSelectedOptionChange={setSelectedOption}
      trigger={(props) => (
        <Button {...props}>
          {selectedOption ? selectedOption.label : "Select an option"}
        </Button>
      )}
    />
  );
};

Filtering and Sorting

By default, SelectMenuSync uses match-sorter to filter options by their label and searchText fields. Results are also ranked by match quality, so the best matches appear first. Before any search is performed, options appear in the order they are supplied. You can customize this behavior in two ways:

Using match-sorter options

Pass a match-sorter options object to customize the default filtering and sorting behavior (e.g., change which keys are matched or adjust ranking):

<SelectMenuSync
  options={options}
  filter={{
    keys: ["label", "searchText"],
    // ...other match-sorter options
  }}
  // ...other props
/>

Using a custom filter function

Pass a function for full control over both filtering and sort order. The returned array determines the exact order options appear in the dropdown:

<SelectMenuSync
  options={options}
  filter={(options, searchValue) => {
    return options.filter((option) =>
      option.label?.toLowerCase().includes(searchValue.toLowerCase())
    );
  }}
  // ...other props
/>

SelectMenu (Async Loading)

Use SelectMenu when options need to be fetched from an API or when dealing with large datasets that require server-side filtering.

Basic Async Loading

import { useState } from "react";
import { SelectMenu } from "@servicetitan/anvil2/beta";
import { Button } from "@servicetitan/anvil2";

const ExampleComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectMenu
      label="Users"
      searchPlaceholder="Search users..."
      loadOptions={async (searchValue) => {
        const response = await fetch(`/api/users?q=${searchValue}`);
        const users = await response.json();
        return users.map((user) => ({
          id: user.id,
          label: user.name,
        }));
      }}
      value={selectedOption}
      onSelectedOptionChange={setSelectedOption}
      trigger={(props) => (
        <Button {...props}>
          {selectedOption ? selectedOption.label : "Select a user"}
        </Button>
      )}
    />
  );
};

Lazy Loading Modes

SelectMenu supports three lazy loading modes for paginated data:

Page-based Pagination

<SelectMenu
  lazy="page"
  lazyOptions={{ pageSize: 10 }}
  loadOptions={async (searchValue, pageNumber, pageSize) => {
    const response = await fetch(
      `/api/items?q=${searchValue}&page=${pageNumber}&size=${pageSize}`
    );
    const { data, totalCount } = await response.json();
    return {
      options: data.map((item) => ({ id: item.id, label: item.name })),
      hasMore: pageNumber * pageSize + data.length < totalCount,
    };
  }}
  // ...other props
/>

Offset-based Pagination

<SelectMenu
  lazy="offset"
  lazyOptions={{ limit: 15 }}
  loadOptions={async (searchValue, offset, limit) => {
    const response = await fetch(
      `/api/items?q=${searchValue}&offset=${offset}&limit=${limit}`
    );
    const { data, totalCount } = await response.json();
    return {
      options: data.map((item) => ({ id: item.id, label: item.name })),
      hasMore: offset + limit < totalCount,
    };
  }}
  // ...other props
/>

Group-based Loading

For loading grouped options incrementally:

<SelectMenu
  lazy="group"
  groupToString={(groupValue) => String(groupValue)}
  loadOptions={async (searchValue, previousGroupKey) => {
    const response = await fetch(
      `/api/items?q=${searchValue}&afterGroup=${previousGroupKey || ""}`
    );
    const { data, hasMore } = await response.json();
    return {
      options: data.map((item) => ({
        id: item.id,
        label: item.name,
        group: item.category,
      })),
      hasMore,
    };
  }}
  // ...other props
/>

Display Modes

Control how the options menu is displayed using the displayMenuAs prop:

// Automatically choose based on device (default)
<SelectMenu displayMenuAs="auto" {...props} />

// Always show as popover (not recommended for mobile)
<SelectMenu displayMenuAs="popover" {...props} />

// Always show as dialog
<SelectMenu displayMenuAs="dialog" {...props} />

Control the width of the popover using the width prop:

// Fixed pixel width
<SelectMenu width={300} {...props} />

// CSS string value
<SelectMenu width="20rem" {...props} />

Caching

SelectMenu caches loadOptions results by default. Configure caching behavior:

// Disable caching
<SelectMenu cache={{ enabled: false }} {...props} />

// Configure max cache size (default: 15)
<SelectMenu cache={{ maxSize: 100 }} {...props} />

Clearing the Cache

Use a ref to imperatively clear the cache:

import { useRef } from "react";
import { SelectMenu } from "@servicetitan/anvil2/beta";

const ExampleComponent = () => {
  const selectMenuRef = useRef(null);

  const handleRefresh = () => {
    selectMenuRef.current?.clearCache();
  };

  return (
    <>
      <SelectMenu ref={selectMenuRef} {...props} />
      <button onClick={handleRefresh}>Refresh Options</button>
    </>
  );
};

Invalidating Options

Call invalidate() to clear the cache and reload options from the data source. Use this when the underlying data has changed and the component needs to reflect the update:

import { useRef } from "react";
import { SelectMenu } from "@servicetitan/anvil2/beta";

const ExampleComponent = () => {
  const selectMenuRef = useRef(null);

  const handleDataSourceChange = () => {
    selectMenuRef.current?.invalidate();
  };

  return (
    <SelectMenu ref={selectMenuRef} {...props} />
  );
};

SelectMenuSync handles this automatically when its options prop changes.

Initial Load Behavior

Control when options are first loaded with the initialLoad prop:

// Load immediately on mount (default for "auto")
<SelectMenu initialLoad="immediate" {...props} />

// Load when user opens the dropdown
<SelectMenu initialLoad="open" {...props} />

// Auto (currently equivalent to "immediate")
<SelectMenu initialLoad="auto" {...props} />

Disabling Search

Pass disableSearch to remove the search input from inside the menu. The menu renders only the option list, and keyboard focus moves directly to the list container.This is useful when the option list is short and well-known or you are integrating with an API that does not support search.

import { useState } from "react";
import { SelectMenuSync } from "@servicetitan/anvil2/beta";
import { Button } from "@servicetitan/anvil2";

const options = [
  { id: 1, label: "Small" },
  { id: 2, label: "Medium" },
  { id: 3, label: "Large" },
];

const ExampleComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectMenuSync
      disableSearch
      label="Size"
      options={options}
      value={selectedOption}
      onSelectedOptionChange={setSelectedOption}
      trigger={(props) => (
        <Button {...props}>
          {selectedOption ? selectedOption.label : "Select a size"}
        </Button>
      )}
    />
  );
};

Disabled Options

Individual options can be disabled by setting disabled: true on the option:

const options = [
  { id: 1, label: "Available Option" },
  { id: 2, label: "Unavailable Option", disabled: true },
  { id: 3, label: "Another Available Option" },
];

<SelectMenuSync
  label="Select an option"
  options={options}
  value={selectedOption}
  onSelectedOptionChange={setSelectedOption}
  trigger={(props) => <Button {...props}>Choose</Button>}
/>

Pinned Options

Pin frequently used or suggested options above the list using the pinned prop. Each pinned section requires a label and an options value, which can be a static array or a dynamic loader function.

Static Pinned Options

Pass an object with label and a static options array:

<SelectMenu
  label="Books"
  pinned={{
    label: "Favorites",
    options: [
      { id: "fav-1", label: "The Martian" },
      { id: "fav-2", label: "Dune" },
    ],
  }}
  loadOptions={fetchBooks}
  value={selectedOption}
  onSelectedOptionChange={setSelectedOption}
  trigger={(props) => <Button {...props}>Select a book</Button>}
/>

Dynamic Pinned Options

Pass a function as options to compute pinned options based on the current search value:

<SelectMenu
  label="Books"
  pinned={{
    label: "AI Suggestions",
    options: async (searchValue) => {
      const suggestions = await fetchAISuggestions(searchValue);
      return suggestions.map((s) => ({ id: s.id, label: s.title }));
    },
  }}
  loadOptions={fetchBooks}
  value={selectedOption}
  onSelectedOptionChange={setSelectedOption}
  trigger={(props) => <Button {...props}>Select a book</Button>}
/>

By default, the loader re-runs whenever the search value changes. Set searchReactive: false to call the loader once and reuse the result across all search values:

<SelectMenu
  label="Books"
  pinned={{
    label: "Your Favorites",
    options: async () => {
      return await fetchFavorites();
    },
    searchReactive: false,
  }}
  loadOptions={fetchBooks}
  value={selectedOption}
  onSelectedOptionChange={setSelectedOption}
  trigger={(props) => <Button {...props}>Select a book</Button>}
/>

Multiple Pinned Sections

Pass an array of pinned section objects:

<SelectMenu
  label="Books"
  pinned={[
    {
      label: "AI Suggestions",
      options: async (searchValue) => {
        const suggestions = await fetchAISuggestions(searchValue);
        return suggestions.map((s) => ({ id: s.id, label: s.title }));
      },
    },
    {
      label: "Your Favorites",
      options: [
        { id: "fav-1", label: "Dune" },
        { id: "fav-2", label: "Foundation" },
      ],
    },
  ]}
  loadOptions={fetchBooks}
  value={selectedOption}
  onSelectedOptionChange={setSelectedOption}
  trigger={(props) => <Button {...props}>Select a book</Button>}
/>

Grouping Options

Options can be organized into visual groups by adding a group property to each option. Groups appear as labeled sections in the dropdown.

Basic Grouping

Add a group property to options and provide a groupToString function to display group labels:

const options = [
  { id: 1, label: "Apple", group: "fruits" },
  { id: 2, label: "Banana", group: "fruits" },
  { id: 3, label: "Carrot", group: "vegetables" },
  { id: 4, label: "Broccoli", group: "vegetables" },
];

<SelectMenuSync
  label="Food"
  options={options}
  groupToString={(group) =>
    group === "fruits" ? "Fruits" : "Vegetables"
  }
  value={selectedOption}
  onSelectedOptionChange={setSelectedOption}
  trigger={(props) => <Button {...props}>Select food</Button>}
/>

Group Sorting

Use groupSorter to control the order of groups. By default, groups appear in the order they are first encountered in the options array.This prop is available on SelectMenuSync and non-lazy SelectMenu:

Avoid using groupSorter with lazy="group". When groups load incrementally from the server and get re-sorted, the menu content shifts unexpectedly, creating a disorienting user experience. Instead, have your server return groups in the desired order.

const options = [
  { id: 1, label: "Item A", group: 3 },
  { id: 2, label: "Item B", group: 1 },
  { id: 3, label: "Item C", group: 2 },
];

<SelectMenuSync
  label="Items"
  options={options}
  groupToString={(group) => `Priority ${group}`}
  groupSorter={(a, b) => Number(a) - Number(b)}
  value={selectedOption}
  onSelectedOptionChange={setSelectedOption}
  trigger={(props) => <Button {...props}>Select item</Button>}
/>

Virtualization

By default, all dropdown options render to the DOM at once. This works well for typical lists but degrades performance with very large option sets. Pass virtualize to enable windowed rendering, which only renders the items currently visible in the scroll viewport plus a small overscan buffer.Consider enabling virtualize when the dropdown feels sluggish to open or keyboard navigation becomes laggy. These symptoms typically appear around 200-500 items depending on device performance and item complexity.

import { useState } from "react";
import { SelectMenuSync } from "@servicetitan/anvil2/beta";
import { Button } from "@servicetitan/anvil2";

const options = Array.from({ length: 5000 }, (_, i) => ({
  id: i,
  label: `Option ${i + 1}`,
}));

const ExampleComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectMenuSync
      virtualize
      label="Large dataset"
      options={options}
      value={selectedOption}
      onSelectedOptionChange={setSelectedOption}
      trigger={(props) => (
        <Button {...props}>
          {selectedOption ? selectedOption.label : "Select an option"}
        </Button>
      )}
    />
  );
};

`SelectMenu` Props

import { useState } from "react";
import { SelectMenu } from "@servicetitan/anvil2/beta";
import { Button } from "@servicetitan/anvil2";

const ExampleComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectMenu
      label="Users"
      loadOptions={async (searchValue) => {
        const response = await fetch(`/api/users?q=${searchValue}`);
        const users = await response.json();
        return users.map((user) => ({
          id: user.id,
          label: user.name,
        }));
      }}
      onSelectedOptionChange={setSelectedOption}
      value={selectedOption}
      trigger={(props) => (
        <Button {...props}>
          {selectedOption ? selectedOption.label : "Select a user"}
        </Button>
      )}
    />
  );
};

label

string

required

Accessible label for the menu. Used by screen readers and as the dialog title on mobile. Not rendered visually in the trigger.

loadOptions

function

required

Function to load options. The signature depends on the lazy mode:

Non-lazy: (searchValue: string) => SelectMenuOption[] | Promise<SelectMenuOption[]>
Page-based: (searchValue: string, pageNumber: number, pageSize: number) => { options: SelectMenuOption[], hasMore?: boolean }
Offset-based: (searchValue: string, offset: number, limit: number) => { options: SelectMenuOption[], hasMore?: boolean }
Group-based: (searchValue: string, previousGroupKey: string | number | null) => { options: SelectMenuGroupedOption[], hasMore?: boolean }

onSelectedOptionChange

(option: SelectMenuOption | null) => void

required

Callback fired when the selected option changes.

trigger

(props: SelectMenuTriggerProps) => ReactElement

required

Render function that receives trigger props (ref, onClick, onKeyDown, ARIA attributes) and returns the element that opens the menu. Spread the props onto a button or interactive element.

value

SelectMenuOption | null

required

The currently selected option. Must be controlled state.

cache

SelectMenuCacheOptions

Configuration for caching loadOptions results:

enabled — Whether caching is enabled (default: true)
maxSize — Maximum number of search values to cache before clearing (default: 15)

debounceMs

number

default:"200"

Milliseconds to debounce search input before calling loadOptions.

disableSearch

boolean

default:"false"

Removes the search input from inside the menu. When true, the menu renders only the option list and keyboard focus moves to the list container.

How to display the options menu:

auto — Popover on desktop, dialog on mobile
popover — Always display as popover
dialog — Always display as dialog

groupSorter

(a: SelectMenuGroupByValue, b: SelectMenuGroupByValue) => number

Function to compare two group values for sorting. When provided, groups are sorted using this comparator. Without this, groups appear in the order they are first encountered. Best used with SelectMenuSync or non-lazy SelectMenu. Avoid using with lazy="group" as it causes the menu to shift unexpectedly when new groups load.

groupToString

(groupValue: SelectMenuGroupByValue) => string

Function to convert group values to display labels. Only used with grouped options. SelectMenuGroupByValue is string | number.

string

The id of the select menu.

initialLoad

"auto" | "immediate" | "open"

default:"auto"

Controls when loadOptions is first called:

auto — Currently equivalent to immediate
immediate — Load on component mount
open — Load when the menu is opened

lazy

"page" | "offset" | "group" | false

default:"false"

Enables lazy loading with the specified pagination strategy.

lazyOptions

object

Configuration for lazy loading:

Page mode: { pageSize?: number } (default pageSize: 20)
Offset mode: { limit?: number } (default limit: 20)
Group mode: {}

onSearchChange

(searchValue: string) => void

Callback when the search value changes.

pinned

SelectMenuPinnedOptions

Options to pin to the top of the list. Accepts a single section object or an array of section objects. Each section requires:

label — Display label for the section header
options — Static array (SelectMenuOption[]) or dynamic loader function ((searchValue: string) => SelectMenuOption[] | Promise<SelectMenuOption[]>)
searchReactive — (Optional) Whether to re-call the loader when the search value changes. Defaults to true. Set to false to call the loader once and reuse the result.
cacheSize — (Optional) Maximum number of search results to cache per section. Defaults to 15. Only applies when searchReactive is true.

searchPlaceholder

string

Placeholder text shown in the search input inside the menu.

searchValue

string

Controlled search value. In most cases you do not need this — lean on the searchValue parameter in loadOptions instead.

virtualize

boolean

default:"false"

Enables windowed rendering for the dropdown list. Improves performance for large option sets by only rendering visible items. Consider enabling when the dropdown feels sluggish to open or keyboard navigation becomes laggy, typically around 200-500+ items.

width

number | string

default:"320"

Width of the popover menu. Accepts a number (pixels) or a CSS string value (e.g., "20rem").

`SelectMenuSync` Props

SelectMenuSync accepts all props from SelectMenu except loadOptions, lazy, debounceMs, cache, and initialLoad, plus the following:

import { useState } from "react";
import { SelectMenuSync } from "@servicetitan/anvil2/beta";
import { Button } from "@servicetitan/anvil2";

const options = [
  { id: 1, label: "Option One" },
  { id: 2, label: "Option Two" },
  { id: 3, label: "Option Three" },
];

const ExampleComponent = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <SelectMenuSync
      label="Options"
      onSelectedOptionChange={setSelectedOption}
      options={options}
      value={selectedOption}
      trigger={(props) => (
        <Button {...props}>
          {selectedOption ? selectedOption.label : "Select an option"}
        </Button>
      )}
    />
  );
};

label

string

required

Accessible label for the menu.

onSelectedOptionChange

(option: SelectMenuOption | null) => void

required

Callback fired when the selected option changes.

options

SelectMenuOption[]

required

The array of options to display in the select menu.

trigger

(props: SelectMenuTriggerProps) => ReactElement

required

Render function that receives trigger props and returns the element that opens the menu.

value

SelectMenuOption | null

required

The currently selected option. Must be controlled state.

disableSearch

boolean

default:"false"

Removes the search input from inside the menu. When true, the menu renders only the option list.

How to display the options menu.

filter

function | MatchSorterOptions

Controls how options are filtered and sorted when the user types a search value. Can be:

A function: (options: SelectMenuOption[], searchValue: string) => SelectMenuOption[] — receives all options and returns the filtered subset in the desired display order
A match-sorter options object to customize the default match-sorter behavior (e.g., which keys to match against, ranking strategy)

Before any search is performed, options appear in the order they are supplied. Default: Filters by label and searchText fields using match-sorter, with results ranked by match quality.

groupSorter

(a: SelectMenuGroupByValue, b: SelectMenuGroupByValue) => number

Function to compare two group values for sorting. When provided, options are sorted by group using this comparator, then by match-sort order within each group. Ungrouped options appear last.

groupToString

(groupValue: SelectMenuGroupByValue) => string

Function to convert group values to display labels. Only used with grouped options. SelectMenuGroupByValue is string | number.

string

The id of the select menu.

onSearchChange

(searchValue: string) => void

Callback when the search value changes.

pinned

SelectMenuPinnedOptions

Options to pin to the top of the list. Accepts the same section object format as SelectMenu’s pinned prop.

searchPlaceholder

string

Placeholder text shown in the search input inside the menu.

searchValue

string

Controlled search value. In most cases you do not need this.

virtualize

boolean

default:"false"

Enables windowed rendering for the dropdown list. Improves performance for large option sets by only rendering visible items.

width

number | string

Width of the popover menu. Accepts a number (pixels) or a CSS string value.

`SelectMenuOption` Type

Options passed to or returned from SelectMenu components must conform to this shape. This is the same type as SelectFieldOption.

type SelectMenuOption = {
  /** Unique identifier for the option */
  id: string | number;

  /** Display text for the option */
  label: string;

  /** Optional text used for search matching (in addition to label) */
  searchText?: string;

  /** Group key for grouped options (required when using lazy="group") */
  group?: string | number;

  /** Whether the option is disabled and cannot be selected */
  disabled?: boolean;

  /** Optional extra data to associate with the option */
  extra?: Record<string, unknown>;

  /** Optional rich content configuration */
  content?: {
    title?: string;
    description?: string;
    chips?: Pick<ChipProps, "label" | "color" | "textWrap">[];
    avatar?: Pick<AvatarProps, "name" | "status" | "color" | "image">;
    icon?: Pick<IconProps, "svg" | "color">;
  };
};

Content Properties

The content object supports the following optional properties:

title — Replaces the label as the primary display text in the dropdown.
description — Secondary text displayed below the title.
chips — Array of chip configurations rendered below the title and description. Each chip accepts label, color, and textWrap.
avatar — Renders an avatar to the left of the option text. Accepts name, status, color, and image.
icon — Renders an icon to the right of the option text. Accepts svg and color.

Example with Rich Content

const options: SelectMenuOption[] = [
  {
    id: 1,
    label: "John Doe",
    searchText: "john.doe@example.com",
    content: {
      title: "John Doe",
      description: "Engineering",
    },
  },
  {
    id: 2,
    label: "Jane Smith",
    searchText: "jane.smith@example.com",
    content: {
      title: "Jane Smith",
      description: "Design",
    },
  },
];

Example with Disabled Options

const options: SelectMenuOption[] = [
  {
    id: 1,
    label: "Available Option",
  },
  {
    id: 2,
    label: "Unavailable Option",
    disabled: true,
  },
  {
    id: 3,
    label: "Another Available Option",
  },
];

Anvil2 Web

Resources

Select Menu – Code

Overview

SelectMenuSync (Static Options)

Filtering and Sorting

Using match-sorter options

Using a custom filter function

SelectMenu (Async Loading)

Basic Async Loading

Lazy Loading Modes

Group-based Loading

Display Modes

Popover Width

Caching

Clearing the Cache

Invalidating Options

Initial Load Behavior

Disabling Search

Disabled Options

Pinned Options

Static Pinned Options

Dynamic Pinned Options

Multiple Pinned Sections

Grouping Options

Basic Grouping

Group Sorting

Virtualization

`SelectMenu` Props

`SelectMenuSync` Props

`SelectMenuOption` Type

Content Properties

Example with Rich Content

Example with Disabled Options

Anvil2 Web

Resources

​Overview

​SelectMenuSync (Static Options)

​Filtering and Sorting

​Using match-sorter options

​Using a custom filter function

​SelectMenu (Async Loading)

​Basic Async Loading

​Lazy Loading Modes

​Page-based Pagination

​Offset-based Pagination

​Group-based Loading

​Display Modes

​Popover Width

​Caching

​Clearing the Cache

​Invalidating Options

​Initial Load Behavior

​Disabling Search

​Disabled Options

​Pinned Options

​Static Pinned Options

​Dynamic Pinned Options

​Multiple Pinned Sections

​Grouping Options

​Basic Grouping

​Group Sorting

​Virtualization

​SelectMenu Props

​SelectMenuSync Props

​SelectMenuOption Type

​Content Properties

​Example with Rich Content

​Example with Disabled Options

Overview

SelectMenuSync (Static Options)

Filtering and Sorting

Using match-sorter options

Using a custom filter function

SelectMenu (Async Loading)

Basic Async Loading

Lazy Loading Modes

Page-based Pagination

Offset-based Pagination

Group-based Loading

Display Modes

Popover Width

Caching

Clearing the Cache

Invalidating Options

Initial Load Behavior

Disabling Search

Disabled Options

Pinned Options

Static Pinned Options

Dynamic Pinned Options

Multiple Pinned Sections

Grouping Options

Basic Grouping

Group Sorting

Virtualization

`SelectMenu` Props

`SelectMenuSync` Props

`SelectMenuOption` Type

Content Properties

Example with Rich Content

Example with Disabled Options