We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Floatlabeltype Placeholder different value


How can we specify a different value for the floatlabel and the placeholder?  It doesn't make any sense to have a label that says "Select Department" after you've already selected a department,  We need the placeholder to say "Select Department" when empty and the label to say "Department" when selected.



1 Reply

UD UdhayaKumar Duraisamy Syncfusion Team April 28, 2023 04:05 AM UTC

To specify a different value for the floatlabel and the placeholder in Syncfusion Blazor DropDownList component, you can use the FloatLabelType property and set it to "Auto". This will automatically set the float label to the selected value and the placeholder to the default value when the dropdown is empty.

You can also use the ValueChange event to dynamically change the placeholder value based on the selected value. In the provided code snippet, we have set the placeholder to "Select Country" and the float label to "Country". When a country is selected, the float label will be updated to the selected country and the placeholder will be updated to "Country" as well.

@page "/"


@using Syncfusion.Blazor.DropDowns


<div style="margin:130px auto;width:300px">

    <SfDropDownList TValue="string" Placeholder=@PlaceHolderValue FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" TItem="Countries" DataSource="@Country" ShowClearButton="true" Width="300px">

        <DropDownListFieldSettings Text="Name" Value="Code"></DropDownListFieldSettings>

        <DropDownListEvents TItem="Countries" TValue="string" ValueChange="@ValueChangeHandler"></DropDownListEvents>



@code {

    public string PlaceHolderValue { get; set; } = "Select Country";

    public class Countries


        public string Name { get; set; }


        public string Code { get; set; }



    List<Countries> Country = new List<Countries>


        new Countries() { Name = "Australia", Code = "AU" },

        new Countries() { Name = "Bermuda", Code = "BM" },

        new Countries() { Name = "Canada", Code = "CA" },

        new Countries() { Name = "Cameroon", Code = "CM" },


    private void ValueChangeHandler(ChangeEventArgs<string, Countries> args)


        PlaceHolderValue = args.Value != null ? "Country" : "Select Country";



Live Chat Icon For mobile
Up arrow icon