Style and appearance in Blazor MultiSelect Dropdown Component

17 Dec 202224 minutes to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the background color of container element

Use the following CSS to customize the background color of container element.

.e-multiselect.e-input-group .e-multi-select-wrapper {
    background-color: red;
}

Customizing the appearance of the delimiter container element

Use the following CSS to customize the appearance of delimiter container element.

.e-multiselect .e-delim-values {
    -webkit-text-fill-color: blue;
    font-size: 16px;
    font-family: cursive;
}

Customizing the appearance of chips

Use the following CSS to customize the appearance of selected chips.

.e-multiselect .e-multi-select-wrapper .e-chips .e-chipcontent {
    font-family: cursive;
    font-size: 20px;
    -webkit-text-fill-color: blue;
}

.e-multi-select-wrapper .e-chips {
    background-color: aqua;
    height: 26px;
}

Customizing the dropdown icon’s color

Use the following CSS to customize the dropdown icon’s color.

.e-multiselect .e-input-group-icon.e-ddl-icon.e-icons, .e-multiselect .e-input-group-icon.e-ddl-icon.e-icons:hover {
    color: red;
    font-size: 13px;
}

Customizing the focus color

Use the following CSS to customize the focusing color of input element.

.e-multiselect.e-input-group.e-control-wrapper.e-input-focus::before, .e-multiselect.e-input-group.e-control-wrapper.e-input-focus::after {
    background: #c000ff;
}

Customizing the disabled component’s text color

Use the following CSS to customize the text color when the component is disabled.

.e-multiselect.e-disabled .e-multi-select-wrapper .e-delim-values {
    -webkit-text-fill-color: red;
}

Customizing the color of the placeholder text

Use the following CSS to customize the text color of placeholder.

.e-multiselect input.e-multiselect::placeholder {
    color: red;
}

Customizing the placeholder to add mandatory indicator(*)

Use the following CSS to add the mandatory indicator * to the float label element.

.e-input-group.e-control-wrapper.e-control-container.e-float-input .e-float-text::after {
    content: "*";
    color: red;
}

Customizing the float label element’s focusing color

Use the following CSS to customize the focusing color of float label element.

.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-multiselect.e-input-group.e-control-wrapper.e-control-container.e-float-input.e-input-focus .e-float-text.e-label-top {
        color: #2319b8;
}

Customizing the outline theme’s focus color

Use the following CSS to customize the focusing color of outline theme.

.e-outline.e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),.e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),.e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),.e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
    border-color: #b1bd15;
    box-shadow: inset 1px 1px #b1bd15, inset -1px 0 #b1bd15, inset 0 -1px #b1bd15;
}

Customizing the background color of focus, hover, and active items

Use the following CSS to customize the background color of focus, hover and active items.

.e-dropdownbase .e-list-item.e-item-focus, .e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover, .e-dropdownbase .e-list-item.e-hover {
    background-color: #1f9c99;
    color: #2319b8;
}

Customizing the appearance of pop-up element

Use the following CSS to customize the appearance of popup element.

.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {
    background-color: #29c2b8;
    color: #207cd9;
    font-family: emoji;
    min-height: 29px
}

Customizing the color of the checkbox

Use the following CSS to customize the color of checkbox.

.e-popup .e-checkbox-wrapper .e-frame.e-check, .e-popup .e-checkbox-wrapper:hover .e-frame.e-check {
    background-color: green;
    color: white;
}

Properties

CssClass

Specifies the CssClass name that can be appended with the root element of the MultiSelect. One or more custom CSS classes can be added to a MultiSelect.

Some of the possible values are

  • e-success, which denotes the component in success state that is added green color to the dropdownlist’s input field.
  • e-warning, which denotes the component in warning state that is added orange color to the dropdownlist’s input field.
  • e-error, which denotes the component in error state that is added red color to the dropdownlist’s input field.
  • e-outline, which supports only in material theme.
  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" CssClass="@CssClass"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
        public string CssClass { get; set; } = "e-success";
    }

    Blazor MultiSelect DropDown with CssClass property

    DelimiterChar

    Sets the delimiter character for default and delimiter visibility modes. DelimiterChar is applicable only in default and delimiter mode.

    Default value of DelimiterChar is ,.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" Mode=VisualMode.Default DelimiterChar="@DelimiterChar"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string DelimiterChar { get; set; } = "/";
    }

    Blazor MultiSelect DropDown with DelimiterChar property

    EnableCloseOnSelect

    Based on the property, when item get select popup visibility state will changed.

    Default value of EnableCloseOnSelect is true.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" EnableCloseOnSelect="@EnableCloseOnSelect"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public bool EnableCloseOnSelect { get; set; } = false;
    
    }

    Blazor MultiSelect DropDown with EnableCloseOnSelect property

    FloatLabelType

    Specifies the floating label behavior of the MultiSelect that the Placeholder text floats above the MultiSelect based on the following values. FloatLabelType is applicable only when Placeholder is used.FloatLabelType is depends on Placeholder.

    Possible values are:

    • Never - Never floats the label in the MultiSelect when the placeholder is available.
    • Always - The floating label always floats above the MultiSelect.
    • Auto - The floating label floats above the MultiSelect after focusing it or when enters the value in it.
  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    @using Syncfusion.Blazor.Inputs;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" FloatLabelType="@FloatLabelType"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public FloatLabelType FloatLabelType { get; set; } = FloatLabelType.Auto;
    
    }

    Blazor MultiSelect DropDown with FloatLabelType property

    HideSelectedItem

    Hides the selected item from the list item.

    Default value of HideSelectedItem is true.

    In the following code, HideSelectedItem is set as false.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" HideSelectedItem="@HideSelectedItem"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public bool HideSelectedItem { get; set; } = false;
    
    }

    Blazor MultiSelect DropDown with HideSelectedItem property

    HtmlAttributes

    You can add the additional input attributes such as disabled, value, and more to the root element.

    If you configured both the property and equivalent input attribute, then the component considers the property value.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" HtmlAttributes="@htmlAttribute"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        Dictionary<string, object> htmlAttribute = new Dictionary<string, object>()
        {
            {"class", "e-games" },
            {"name", "games" },
            {"style", "background-color: yellow; text-align: right" },
            {"title", "Syncfusion DropDownList" }
        };
    
    }

    Blazor MultiSelect DropDown with HtmlAttributes property

    InputAttributes

    You can add the additional input attributes such as disabled, value, and more to the root element.

    If you configured both the property and equivalent input attribute, then the component considers the property value.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData"InputAttributes="@inputAttribute"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
         Dictionary<string, object> inputAttribute = new Dictionary<string, object>()
        {
            {"readonly", true },
            {"value","Golf"}
        };
    
    }

    Blazor MultiSelect DropDown with InputAttributes property

    OpenOnClick

    Whether to automatically open the popup when the control is clicked.

    Default value of OpenOnClick is true.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" OpenOnClick="OpenOnClick"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public bool OpenOnClick{ get; set; } = false;
    
    }

    Blazor MultiSelect DropDown with OpenOnClick property

    Placeholder

    Specifies the text that is shown as a hint or Placeholder until the user focuses or enter a value in MultiSelect.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="@Placeholder" DataSource="@LocalData" > 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string Placeholder{ get; set; } = "Favorite Sports";
    
    }

    Blazor MultiSelect DropDown with Placeholder property

    PopupHeight

    Gets or sets the height of the popup list. By default, it renders based on its list item.

    Default value of PopupHeight is 300px.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" PopupHeight="@PopupHeight" > 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string PopupHeight { get; set; } = "200px";
    
    }

    Blazor MultiSelect DropDown with PopupHeight property

    PopupWidth

    Gets or sets the width of the popup list and percentage values has calculated based on input width.

    Default value of PopupWidth is 100%.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" PopupWidth="@PopupWidth"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string PopupWidth { get; set; } = "200px";
    
    }

    Blazor MultiSelect DropDown with PopupWidth property

    Readonly

    Specifies the boolean value whether the MultiSelect allows the user to change the value.

    Default value of Readonly is false.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" Readonly="Readonly"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public bool Readonly { get; set; } = true;
    
    }

    Blazor MultiSelect DropDown with Readonly property

    ShowClearButton

    Enables close icon with the each selected item.

    Default value of ShowClearButton is true.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" ShowClearButton="@ShowClearButton"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public bool ShowClearButton { get; set; } = false;
    
    }

    Blazor MultiSelect DropDown with ShowClearButton property

    ShowDropDownIcon

    Allows you to either show or hide the DropDown button on the component.

    Default value of ShowDropDownIcon is false.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" ShowDropDownIcon="@ShowDropDownIcon"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public bool ShowDropDownIcon { get; set; } = true;
    
    }

    Blazor MultiSelect DropDown with ShowDropDownIcon property

    TabIndex

    Specifies the tab order of the DropDownList component.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" TabIndex=@TabIndex> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public int TabIndex { get; set; } = -1;
    
    }

    Width

    Gets or sets the width of the component. By default, it sizes based on its parent. container dimension.

    Default value of Width is 100%.

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <SfMultiSelect TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" Width="@Width"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    
    @code {
    
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string Width { get; set; } = "600px";
    
    }

    Blazor MultiSelect DropDown with Width property

    Methods

    ClearAsync()

    Allows you to clear the selected values from the MultiSelect component.

    Declaration

    NOTE

    public Task ClearAsync()

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <div>
        <button  @onclick="ClearAll">Buttton</button>
    </div>
    <div>
    <SfMultiSelect @ref="MultiSelectObj" TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" @bind-Value="@GameValue"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    </div>
    
    @code {
        SfMultiSelect<string[],Games> MultiSelectObj;
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string[] GameValue { get; set; } = { "Game5"};
    
         public void ClearAll()
        {
            this.MultiSelectObj.ClearAsync();
        }
    
    }

    Blazor MultiSelect DropDown with ClearAsync method

    FocusAsync()

    Sets the focus to the MultiSelect component for interaction.

    Declaration

    NOTE

    public Task FocusAsync()

    FocusOutAsync()

    Remove the focus from the MultiSelect component, if the component is in focus state.

    Declaration

    NOTE

    public Task FocusOutAsync()

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <div class=button>
        <button  @onclick="Focus">FocusIn</button>
    </div>
    <div class=button>
        <button  @onclick="FocusOut">FocusOut</button>
    </div>
    <div class=content>
    <SfMultiSelect @ref="MultiSelectObj" TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" @bind-Value="@GameValue"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    </div>
    
    @code {
        SfMultiSelect<string[],Games> MultiSelectObj;
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string[] GameValue { get; set; } = { "Game5"};
    
        public void Focus()
        {
            this.MultiSelectObj.FocusIn();
        }
    
        public void FocusOut()
        {
            this.MultiSelectObj.FocusOut();
        }
    
    }
    <style>
        .button{
            margin-top: 5px;
        }
    </style>

    HidePopupAsync()

    Hides the popup if it is in an open state.

    Declaration

    NOTE

    public Task HidePopupAsync()

    ShowPopupAsync()

    Opens the popup that displays the list of items.

    Declaration

    NOTE

    public Task ShowPopupAsync()

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <div class=button>
        <button  @onclick="Show">Show</button>
    </div>
    <div class=button>
        <button  @onclick="Hide">Hide</button>
    </div>
    <div class=content>
    <SfMultiSelect @ref="MultiSelectObj" TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" @bind-Value="@GameValue"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    </div>
    
    @code {
        SfMultiSelect<string[],Games> MultiSelectObj;
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string[] GameValue { get; set; } = { "Game5"};
    
        public void Show()
        {
            this.MultiSelectObj.ShowPopupAsync();
        }
    
        public void Hide()
        {
            this.MultiSelectObj.HidePopupAsync();
        }
    
    }
    <style>
        .button{
            margin-top: 5px;
        }
    </style>

    HideSpinner()

    Hides the spinner loader.

    Declaration

    NOTE

    public Task HideSpinner()

    ShowSpinner()

    Shows the spinner loader.

    Declaration

    NOTE

    public Task ShowSpinner()

  • RAZOR
  • @using Syncfusion.Blazor.DropDowns;
    
    <div class=button>
        <button  @onclick="Show">Show</button>
    </div>
    <div class=button>
        <button  @onclick="Hide">Hide</button>
    </div>
    <div class=content>
    <SfMultiSelect @ref="MultiSelectObj" TValue="string[]" TItem="Games" Placeholder="Favorite Sports" DataSource="@LocalData" ShowDropDownIcon="true" @bind-Value="@GameValue"> 
        <MultiSelectFieldSettings Text="Text" Value="ID"></MultiSelectFieldSettings>
    </SfMultiSelect>
    </div>
    
    @code {
        SfMultiSelect<string[],Games> MultiSelectObj;
        public class Games
        {
            public string ID { get; set; }
            public string Text { get; set; }
        }
        List<Games> LocalData = new List<Games> {
        new Games() { ID= "Game1", Text= "American Football" },
        new Games() { ID= "Game2", Text= "Badminton" },
        new Games() { ID= "Game3", Text= "Basketball" },
        new Games() { ID= "Game4", Text= "Cricket" },
        new Games() { ID= "Game5", Text= "Football" },
        new Games() { ID= "Game6", Text= "Golf" },
        new Games() { ID= "Game7", Text= "Hockey" },
        new Games() { ID= "Game8", Text= "Rugby"},
        new Games() { ID= "Game9", Text= "Snooker" },
        new Games() { ID= "Game10", Text= "Tennis"},
        };
    
        public string[] GameValue { get; set; } = { "Game5"};
    
        public void Show()
        {
            this.MultiSelectObj.ShowSpinnerAsync();
        }
    
        public void Hide()
        {
            this.MultiSelectObj.HideSpinnerAsync();
        }
    
    }
    <style>
        .button{
            margin-top: 5px;
        }
    </style>

    Blazor MultiSelect DropDown with show hide spinner method