Component · Selector

PromptInputModelSelect

Selector for the active AI model. Options are typed (PromptInputModelOption[]) with id, label, description, badge, and disabled. Two-way bindable value.

Basic usage

typescript
const MODELS = [
  { id: 'claude-opus-4-7',   label: 'Claude Opus 4.7',  description: 'Highest quality', badge: 'flagship' },
  { id: 'claude-sonnet-4-6', label: 'Claude Sonnet 4.6', description: 'Balanced' },
  { id: 'claude-haiku-4-5',  label: 'Claude Haiku 4.5',  description: 'Fastest, cheapest' },
] satisfies PromptInputModelOption[];

@Component({
  template: `
    <prompt-input-model-select
      [options]="models"
      [(value)]="selectedModel"
      placeholder="Choose model"
    />
  `,
})
export class Chat {
  models = MODELS;
  selectedModel = signal<string | null>('claude-sonnet-4-6');
}

API — Inputs

NameTypeDefaultDescription
optionsreadonly PromptInputModelOption[](required)Available options.
valuestring | nullnullSelected option id. Two-way bindable.
placeholderstring'Choose model'Shown when value is null.
disabledbooleanfalseDisable independently of parent.
ariaLabelstring'Select model'Accessible label.

PromptInputModelOption

NameTypeDescription
idstringUnique identifier matched against value.
labelstringVisible label.
descriptionstring?Secondary text under the label.
badgestring?Small uppercase tag (e.g. "flagship").
disabledboolean?When true, option is shown but not selectable.

Accessibility

  • Trigger has aria-haspopup="listbox" and aria-expanded
  • Open panel has role="listbox"; each option has role="option" and aria-selected
  • Disabled options are skipped on click
  • v0.1 note: typeahead and full combobox keyboard pattern pending. Migration to @spartan-ng/brain/select planned for v0.2.
MIT © Kalvnerv0.1.0 · pre-release