TagBox - Appearance Customization

• Jul 06, 2025
• 4 minutes to read

The DevExpress Blazor TagBox component allows you to customize its appearance: the size, the appearance of the edit box, items, and column cells. This topic lists available options.

Size Modes

Use the SizeMode property to specify a TagBox size. The following code snippet applies different size modes to TagBox components:

Razor

@using StaffData

<DxTagBox Data="@Staff.DataSource"
          TextFieldName="@nameof(Person.Text)"
          @bind-Values="@SelectedStaff"
          SizeMode="SizeMode.Small"></DxTagBox>

<DxTagBox Data="@Staff.DataSource"
          TextFieldName="@nameof(Person.Text)"
          @bind-Values="@SelectedStaff"
          SizeMode="SizeMode.Medium"></DxTagBox>

<DxTagBox Data="@Staff.DataSource"
          TextFieldName="@nameof(Person.Text)"
          @bind-Values="@SelectedStaff"
          SizeMode="SizeMode.Large"></DxTagBox>

@code {
    IEnumerable<Person> SelectedStaff = new List<Person>() { Staff.DataSource[0] };
}

StaffData

namespace StaffData {
    public static class Staff {
        private static readonly Lazy<List<Person>> dataSource = new Lazy<List<Person>>(() => {
            var dataSource = new List<Person>() {
                new Person() { Id= 0 , FirstName="John", LastName="Heart", Department=Department.Electronics },
                new Person() { Id= 1 , FirstName="Samantha", LastName="Bright", Department=Department.Motors },
                new Person() { Id= 2 , FirstName="Arthur", LastName="Miller", Department=Department.Software },
                new Person() { Id= 3 , FirstName="Robert", LastName="Reagan", Department=Department.Electronics },
                new Person() { Id= 4 , FirstName="Greta", LastName="Sims", Department=Department.Motors },
                new Person() { Id= 5 , FirstName="Brett", LastName="Wade", Department=Department.Software },
                new Person() { Id= 6 , FirstName="Sandra", LastName="Johnson", Department=Department.Electronics },
                new Person() { Id= 7 , FirstName="Edward", LastName="Holmes", Department=Department.Motors },
                new Person() { Id= 8 , FirstName="Barbara", LastName="Banks", Department=Department.Software },
                new Person() { Id= 9 , FirstName="Kevin", LastName="Carter", Department=Department.Electronics },
                new Person() { Id= 10, FirstName="Cynthia", LastName="Stanwick", Department=Department.Motors },
                new Person() { Id= 11, FirstName="Sam", LastName="Hill", Department=Department.Electronics }};
            return dataSource;
        });
        public static List<Person> DataSource { get { return dataSource.Value; } }
    }

    public class Person {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public Department Department { get; set; }
        public string Text => $"{FirstName} {LastName} ({Department} Dept.)";
        public override bool Equals(object obj) {
            if (obj is Person typedObj) {
                return (this.Id == typedObj.Id) && (this.FirstName == typedObj.FirstName) && (this.LastName == typedObj.LastName)
                && (this.Department == typedObj.Department);
            }
            return base.Equals(obj);
        }
    }

    public enum Department { Motors, Electronics, Software }
}

For more information, refer to the following help topics:

• Size Modes
• CSS Classes

Drop-Down List Width

Use the DropDownWidthMode property to specify the width of the drop-down list. The following values are available:

• ContentOrEditorWidth (Default) - The list displays item text completely. The minimum list width matches the editor.
• ContentWidth - The list width is equal to the width of the longest list item.
• EditorWidth - The list width matches the editor. If item text does not fit the editor width, item text is displayed across multiple lines.

Run Demo: ComboBox – Drop-Down List Width

Run Demo: TagBox – Drop-Down List Width

Drop-Down Window Direction

Use the DropDownDirection property to specify the direction in which the TagBox’s drop-down window is displayed relative to the input element. The default value is Down. The following code changes the direction to Up:

<DxTagBox Data="@Cities" @bind-Values="@Values" DropDownDirection="DropDownDirection.Up" />

@code {
    IEnumerable<string> Cities = new List<string>() {
        "London",
        "Berlin",
        "Paris",
    };

    IEnumerable<string> Values { get; set; }
}

Note

If the editor is close to a browser window’s edge and there is not enough space to display the drop-down window in the specified direction, the drop-down window is displayed in the opposite direction.

Clear Button and Placeholder

Set the ClearButtonDisplayMode property to Auto to show the Clear button when the TagBox has tags. Users can click this button to clear all the displayed tags (set the Tags property to null).

Use the NullText property to display the prompt text (placeholder) in TagBox when its Tags property is set to null.

Razor

<DxTagBox NullText="Select countries..."
          Data="@CountryData.Countries"
          @bind-Values="@SelectedCountries"
          TextFieldName="@nameof(Country.CountryName)"
          ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
</DxTagBox>

@code {
    IEnumerable<Country> SelectedCountries { get; set; }
}

Country

public class Country {
    public int Id { get; set; }
    public string CountryName { get; set; }
}

public static class CountryData {
    private static readonly Lazy<List<Country>> countries = new Lazy<List<Country>>(() => {
        return new List<Country>()
        {
            new Country() { Id = 0, CountryName = "USA" },
            new Country() { Id = 1, CountryName = "Germany" },
            new Country() { Id = 2, CountryName = "Japan" }
        };
    });
    public static List<Country> Countries { get { return countries.Value; } }
}

Run Demo: TagBox - Clear Button and Placeholder

Templates

TagBox templates are RenderFragment<TValue> properties. They replace the default content area rendering and allow you to arrange custom content in TagBox elements. For more information, review the following topic: TagBox - Templates.