# Select Box

Our select box component serves as a versatile tool within forms, offering both single-select and multi-select options. This flexibility enhances user interactions and ensures an intuitive experience for users when making choices or selections. For more information please refer to this link <https://sunbird-ed.github.io/sunbird-style-guide/dist/#/select>

**Example of Single Select box:**

<figure><img src="https://3233010154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgPDmvKwE_DgYJbvPS%2Fuploads%2FmbbDjM44PokNSW1B0V0s%2Fimage.png?alt=media&#x26;token=d5f4700f-12c2-4900-bde5-c5cc189f7ca5" alt=""><figcaption></figcaption></figure>

```html
<sui-select class="selection" [(ngModel)]="selectedOption" [options]="options"
labelField="name" [isSearchable]="searchable" [isDisabled]="disabled" #select>
           <sui-select-option *ngFor="let option of select.filteredOptions"
                      [value]="option">
           </sui-select-option>
</sui-select>
```

**Example of Multi Select box:**&#x20;

<figure><img src="https://3233010154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkgPDmvKwE_DgYJbvPS%2Fuploads%2FBYQBKNr8JyNDtxdg1bpk%2Fimage.png?alt=media&#x26;token=6be948a7-dbfc-4748-9c19-8bd7f0581c63" alt=""><figcaption></figcaption></figure>

```html
<sui-multi-select class="selection" [(ngModel)]="selectedOptions" [options]="options"
labelField="name" [isSearchable]="searchable" [isDisabled]="disabled" [hasLabels]="!hideLabels"
#multiSelect>
     <sui-select-option *ngFor="let option of multiSelect.filteredOptions"
          [value]="option">
     </sui-select-option>
</sui-multi-select>
```