# 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://3640233154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuT3rClXbC6ZXgkNM76Vm%2Fuploads%2Fgit-blob-374bbfb5b9d4bc3baae7a1cd6f8bc0218cc04013%2Fimage%20(43).png?alt=media" 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:**

<figure><img src="https://3640233154-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FuT3rClXbC6ZXgkNM76Vm%2Fuploads%2Fgit-blob-f0fb459950a9ab7ac9ba41398fdb3a47cef279be%2Fimage%20(44).png?alt=media" 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>
```