Select

<Select Value="@selectedValue" ValueChanged="@HandleValueChanged">
  <option value="">Choose an option...</option>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</Select>

@code {
    private string? selectedValue;

    private void HandleValueChanged(string value)
    {
        selectedValue = value;
    }
}

<Select @bind-Value="selectedFruit">
  <option value="">Select a fruit...</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
  <option value="orange">Orange</option>
</Select>

@code {
    private string? selectedFruit;
}

<div class="space-y-2">
  <Label>Choose a fruit</Label>
  <Select Value="@selectedFruit" ValueChanged="@HandleFruitChanged">
    <option value="">Select...</option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="orange">Orange</option>
  </Select>
</div>

@code {
    private string? selectedFruit;

    private void HandleFruitChanged(string value)
    {
        selectedFruit = value;
    }
}

<Select Value="@selectedCountry" ValueChanged="@HandleCountryChanged">
  <option value="">Select a country...</option>
  @foreach (var country in countries)
  {
    <option value="@country.Code">@country.Name</option>
  }
</Select>

@code {
    private string? selectedCountry;
    private List<Country> countries = new()
    {
        new Country { Code = "us", Name = "United States" },
        new Country { Code = "uk", Name = "United Kingdom" },
        new Country { Code = "ca", Name = "Canada" }
    };

    private void HandleCountryChanged(string value)
    {
        selectedCountry = value;
    }

    private class Country
    {
        public string Code { get; set; } = "";
        public string Name { get; set; } = "";
    }
}

<Select Disabled>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</Select>

shellui add select