Model Selector Since v4.1.0

A grouped Material menu for picking the model inside the prompt input.

Model Selector is a recipe and adds no Core code. It is a mat-menu with a menu-label row per provider and a trailing pseudo checkbox on the selected model, opened from a button in the prompt input chin.

Example

The trigger shows the selected model. Each item is a menu radio item, so assistive technology announces which model is checked.

<div class="flex flex-col gap-y-1.5">
  <form buiPromptInput>
    <div buiPromptInputEditor placeholder="Ask anything"></div>
    <button matIconButton class="primary" aria-label="Send">
      <mat-icon svgIcon="corner-down-left" />
    </button>
  </form>
  <div class="flex items-center gap-x-1 px-2">
    <button
      matButton
      type="button"
      class="tertiary small ms-auto"
      [matMenuTriggerFor]="modelMenu"
    >
      {{ selectedModel().label }}
      <mat-icon iconPositionEnd svgIcon="chevron-down" />
    </button>
    <mat-menu #modelMenu="matMenu" xPosition="before">
      @for (group of modelGroups; track group.provider) {
        @if (!$first) {
          <mat-divider />
        }
        <div class="menu-label">{{ group.provider }}</div>
        @for (model of group.models; track model.id) {
          <button
            mat-menu-item
            role="menuitemradio"
            [attr.aria-checked]="model === selectedModel()"
            (click)="selectedModel.set(model)"
          >
            <span>{{ model.label }}</span>
            <span class="flex-auto"></span>
            <mat-pseudo-checkbox
              appearance="minimal"
              [state]="model === selectedModel() ? 'checked' : 'unchecked'"
            />
          </button>
        }
      }
    </mat-menu>
  </div>
</div>

import { MatButton, MatIconButton } from '@angular/material/button';
import { MatPseudoCheckbox } from '@angular/material/core';
import { MatDivider } from '@angular/material/divider';
import { MatIcon } from '@angular/material/icon';
import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
import { BuiPromptInput, BuiPromptInputEditor } from '@/bui/ui/prompt-input';

readonly modelGroups = modelGroups;
readonly selectedModel = signal(modelGroups[0].models[1]);

Data

The menu renders a list of provider groups. The selected model is a signal holding one of the models; send its id with the prompt.

const modelGroups: {
  provider: string;
  models: { id: string; label: string }[];
}[] = [
  {
    provider: 'Anthropic',
    models: [
      { id: 'claude-opus-5-5', label: 'Claude Opus 5.5' },
      { id: 'claude-sonnet-5-5', label: 'Claude Sonnet 5.5' },
      { id: 'claude-haiku-5-5', label: 'Claude Haiku 5.5' },
    ],
  },
  {
    provider: 'OpenAI',
    models: [
      { id: 'gpt-5', label: 'GPT-5' },
      { id: 'gpt-5-mini', label: 'GPT-5 mini' },
    ],
  },
];