Index.razor

@page "/"

<div class="control">
    <SfDropDownList DataSource="@Games" TValue="string" TItem="GamesData" Placeholder="Select a game"
   PopupWidth="250px" PopupHeight="400px">
        <DropDownListFieldSettings Text="Name" Value="ID"></DropDownListFieldSettings>
    </SfDropDownList>
</div>

<style>
    .control {
        width: 250px;
        margin: 10%;
    }
</style>

@code {

  public class GamesData
  {  
    public string ID { get; set; }
    public string Name { get; set; }
  }
  List<GamesData> Games = new List<GamesData> {
    new GamesData() { ID= "Game1", Name= "Badminton" },
    new GamesData() { ID= "Game2", Name= "Basketball" },
    new GamesData() { ID= "Game3", Name= "Cricket" },
    new GamesData() { ID= "Game4", Name= "Football" },
    new GamesData() { ID= "Game5", Name= "Golf" },
    new GamesData() { ID= "Game6", Name= "Hockey" },
    new GamesData() { ID= "Game7", Name= "Tennis"},
  }; 
    
}