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

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>

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>

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

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>