Select

A selection component with search and multi-select support.

Basic Usage

Basic dropdown selection.

Apple
Apple
Banana
Cherry
Dragonfruit
Elderberry
Value: apple
<prism-select [options]="options" [(value)]="singleValue" label="Fruit" />

Multi Select

Allows selecting multiple options.

 Apple  Banana 
Apple
Banana
Cherry
Dragonfruit
Elderberry
Value: [
  "apple",
  "banana"
]
<prism-select [options]="options" [multiple]="true" [(value)]="multiValue" label="Fruits" />

Searchable

Enable filtering options with a search input.

Apple
Banana
Cherry
Dragonfruit
Elderberry
<prism-select [options]="options" [searchable]="true" label="Search Fruit" />

PrismSelect APINameTypeDefaultDescription
optionsinput<SelectOption[]>[]Array of data options.
placeholderinput<string>'Select...'Placeholder for the select input.
searchableinput<boolean>falseWhether the select is searchable.
multipleinput<boolean>falseAllow multiple selection.
allowClearinput<boolean>falseShow clear button icon.
sizeinput<'sm' | 'md' | 'lg'>'md'Size of the component.
maxHeightinput<string>'300px'Maximum height of the dropdown.
valuemodel<unknown>nullTwo-way bound selected value(s).
disabledmodel<boolean>falseWhether the select is disabled.

Name	Type	Default	Description
`options`	`input<SelectOption[]>`	`[]`	Array of data options.
`placeholder`	`input<string>`	`'Select...'`	Placeholder for the select input.
`searchable`	`input<boolean>`	`false`	Whether the select is searchable.
`multiple`	`input<boolean>`	`false`	Allow multiple selection.
`allowClear`	`input<boolean>`	`false`	Show clear button icon.
`size`	`input<'sm' \| 'md' \| 'lg'>`	`'md'`	Size of the component.
`maxHeight`	`input<string>`	`'300px'`	Maximum height of the dropdown.
`value`	`model<unknown>`	`null`	Two-way bound selected value(s).
`disabled`	`model<boolean>`	`false`	Whether the select is disabled.