Floatlabeltype Placeholder different value

[Alex]

Hi,

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.

Thanks,

Alex

[UdhayaKumar Duraisamy]

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>

    </SfDropDownList>

</div>

@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";

    }

}