Placeholder and Float Label in MultiColumn ComboBox

24 Sep 20247 minutes to read

Placeholder

Utilize the Placeholder property to show a brief description of the expected input value. In the example below, assign Select a game to the Placeholder property, which will update the Placeholder attribute of the input element in the DOM accordingly.

CSHTML

@using Syncfusion.Blazor.MultiColumnComboBox
@using Syncfusion.Blazor.Data

<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>

@code {

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
        public string Category { get; set; } // New field
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
    new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
    new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
    new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
    new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
    new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
    new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
    new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
    new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};

}

## 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.MultiColumnComboBox
@using Syncfusion.Blazor.Inputs

<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>

@code {

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
        public string Category { get; set; } // New field
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
    new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
    new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
    new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
    new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
    new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
    new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
    new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
    new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};

}
<style>
    .e-input-group.e-control-wrapper.e-control-container.e-float-input .e-float-text::after {
        content: "*";
        color: red;
        padding: 4px;
    }
</style>

Floating label

Use the FloatLabelType property to define how the floating label behaves in the DropDownList, allowing the Placeholder text to float above the TextBox. This functionality is relevant only when a Placeholder is present. The FloatLabelType depends on the Placeholder setting, with its default value being 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.MultiColumnComboBox
@using Syncfusion.Blazor.Inputs

<SfMultiColumnComboBox TItem="Games" TValue="string" DataSource="LocalData" FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto" AllowFiltering=true ValueField="Game" Placeholder="Select a game" TextField="Game" PopupWidth="600px">
</SfMultiColumnComboBox>

@code {

    public class Games
    {
        public string ID { get; set; }
        public string Game { get; set; }
        public string Category { get; set; } // New field
    }
    List<Games> LocalData = new List<Games> {
    new Games() { ID= "Game1", Game= "American Football", Category= "Outdoor" },
    new Games() { ID= "Game2", Game= "Badminton", Category= "Indoor" },
    new Games() { ID= "Game3", Game= "Basketball", Category= "Outdoor" },
    new Games() { ID= "Game4", Game= "Cricket", Category= "Outdoor" },
    new Games() { ID= "Game5", Game= "Football", Category= "Outdoor" },
    new Games() { ID= "Game6", Game= "Golf", Category= "Outdoor" },
    new Games() { ID= "Game7", Game= "Hockey", Category= "Outdoor" },
    new Games() { ID= "Game8", Game= "Rugby", Category= "Outdoor" },
    new Games() { ID= "Game9", Game= "Snooker", Category= "Indoor" }
};

}