Search code examples
c#asp.net-coreblazor

How to avoid selecting the default value in a <select> dropdown in Blazor?


I have a dropdown with a default value By default the first option is selected automatically but I want to ensure that users actively select a value instead of using the default

    <select @bind="SelectedValue">
      <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
    </select>

<p>Selected Value: @SelectedValue</p>

@code {
    private string SelectedValue = "";
}

Solution

  • <select @bind="SelectedValue">
        <option value="" disabled selected>Please select an option</option>
        <option value="Option1">Option 1</option>
        <option value="Option2">Option 2</option>
    </select>
    
    <p>Selected Value: @SelectedValue</p>
    
    @code {
        private string SelectedValue = "";
    }
    

    The is used as a placeholder that appears as the default selection. It has an empty value attribute making it an invalid choice