Placeholder and Float Label in AutoComplete

14 Mar 20243 minutes to read

Placeholder

Use the Placeholder property to display a small description of the expected value in the input. In the following sample demonstration, set the Select a game as the Placeholder property value, which will set the respective value to the Placeholder attribute of the input element in the DOM.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfAutoComplete TValue="string" TItem="string" Placeholder="Select a game" DataSource="@data" Width="300px"></SfAutoComplete>
    
    @code{
        List<string> data = new List<string>() { "Cricket", "Badminton","Football" };
    }

    Blazor AutoComplete with placeholder

    Color of the placeholder text

    You can change the color of the placeholder by targeting its CSS class input.e-input::placeholder, which indicates the placeholder text, and set the desired color using the color property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns
    
    <SfAutoComplete TValue="string" TItem="string" Placeholder="Select a game" DataSource="@data" Width="300px"></SfAutoComplete>
    
    @code {
        List<string> data = new List<string>() { "Cricket", "Badminton", "Football" };
    }
    <style>
        .e-ddl.e-input-group input.e-input::placeholder {
            color: red;
        }
    </style>

    Blazor AutoComplete with color placeholder

    Add mandatory indicator using placeholder

    The mandatory indicator * can be applied to the placeholder by targeting its CSS class .e-float-text::after using the content style.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns
    @using Syncfusion.Blazor.Inputs
    
    <SfAutoComplete TValue="string" TItem="string" Placeholder="Select a game" FloatLabelType="FloatLabelType.Auto" DataSource="@data" Width="300px"></SfAutoComplete>
    
    @code {
        List<string> data = new List<string>() { "Cricket", "Badminton", "Football" };
    }
    <style>
        .e-input-group.e-control-wrapper.e-control-container.e-float-input .e-float-text::after {
            content: "*";
            color: red;
        }
    </style>

    Blazor AutoComplete with mandatory indicator placeholder

    FloatLabel

    Use the FloatLabelType property to specify the floating label behavior of the AutoComplete that the Placeholder text floats above the AutoComplete based on the following values. FloatLabelType is applicable only when Placeholder is used. FloatLabelType is depends on Placeholder. Default value of FloatLabelType is Never.

    The floating label supports the types of actions as follow.

    Type Description
    Auto The floating label will float above the input after focusing, or entering a value in the input.
    Always The floating label will always float above the input.
    Never By default, never float the label in the input when the placeholder is available.

    The FloatLabelType as Auto is demonstrated in the following code sample.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns
    @using Syncfusion.Blazor.Inputs
    
    <SfAutoComplete TValue="string" TItem="string" Placeholder="Select a game" FloatLabelType="FloatLabelType.Auto" DataSource="@data" Width="300px"></SfAutoComplete>
    
    @code {
        List<string> data = new List<string>() { "Cricket", "Badminton", "Football" };
    }

    Blazor AutoComplete with float label

    Customizing the float label element’s focusing color

    You can change the text color of the floating label when it is focused by targeting its CSS classes .e-input-focus and .e-float-text.e-label-top. These classes indicate the floating label text while it is focused state and set the desired color using the color property.

  • CSHTML
  • @using Syncfusion.Blazor.DropDowns
    @using Syncfusion.Blazor.Inputs
    
    <SfAutoComplete TValue="string" TItem="string" Placeholder="Select a game" FloatLabelType="FloatLabelType.Auto" DataSource="@data" Width="300px"></SfAutoComplete>
    
    @code {
        List<string> data = new List<string>() { "Cricket", "Badminton", "Football" };
    }
    
    <style>
        .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::before, .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::before, .e-float-input.e-input-group:not(.e-float-icon-left) .e-float-line::after, .e-float-input.e-control-wrapper.e-input-group:not(.e-float-icon-left) .e-float-line::after {
            background-color: #2319b8;
        }
    
        .e-ddl.e-lib.e-input-group.e-control-wrapper.e-control-container.e-float-input.e-input-focus .e-float-text.e-label-top {
            color: #2319b8;
        }
    </style>

    Blazor AutoComplete with float label focusing color