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