Grouped Options

Organize options into categories with styled group headers. Search filters within groups automatically.

Categorized Options

27 items in 5 categories

Pass an array of OptionGroup objects:

import { useVirtualSelect } from 'virtualized-ui';
import type { OptionGroup } from 'virtualized-ui';

interface MenuItem {
  id: string;
  name: string;
  price: string;
}

const groups: OptionGroup<MenuItem>[] = [
  {
    label: 'Appetizers',
    options: [
      { id: 'bruschetta', name: 'Bruschetta', price: '$8' },
      { id: 'calamari', name: 'Fried Calamari', price: '$12' },
    ],
  },
  {
    label: 'Main Courses',
    options: [
      { id: 'steak', name: 'Ribeye Steak', price: '$32' },
      { id: 'salmon', name: 'Pan-Seared Salmon', price: '$26' },
    ],
  },
];

const select = useVirtualSelect({
  options: groups,
  getOptionValue: (m) => m.id,
  getOptionLabel: (m) => m.name,
  searchable: true,
});

Group headers appear in flattenedItems with type: ‘group-header’:

select.flattenedItems.forEach((item) => {
  if (item.type === 'group-header') {
    // Render header: item.groupLabel
  } else {
    // Render option: item.option
  }
});

OptionGroup Type

Field	Type	Description
`label`	`string`	Display text for the group header
`options`	`T[]`	Array of options in this group

Component Slots

Customize group headers with the GroupHeader slot:

<VirtualSelect
  options={groups}
  getOptionValue={(m) => m.id}
  getOptionLabel={(m) => m.name}
  components={{
    GroupHeader: ({ label }) => (
      <div style={{ padding: '8px 12px', fontWeight: 700, color: '#666' }}>
        {label}
      </div>
    ),
  }}
/>