telerik · dimodi · Aug 29, 2025 · Aug 15, 2025 · Aug 19, 2025 · Aug 28, 2025
@@ -12,10 +12,10 @@ position: 10
 
 You can control the appearance of the Chip by using the following parameters:
 
-* [FillMode](#fillmode)
-* [Rounded](#rounded)
-* [Size](#size)
-* [ThemeColor](#themecolor)
+* [`FillMode`](#fillmode)
+* [`Rounded`](#rounded)
+* [`Size`](#size)
+* [`ThemeColor`](#themecolor)
 
 ## FillMode
 
@@ -144,7 +144,6 @@ The `ThemeColor` parameter applies a predefined text color and background color.
 |`Success`|`success`|
 |`Warning`|`warning`|
 |`Error`|`error`|
-|`None`|`none`|
 
 >caption The built-in ThemeColors
 
@@ -162,7 +161,7 @@ The `ThemeColor` parameter applies a predefined text color and background color.
         <div style="float:left; margin: 20px;">
             <TelerikChip @bind-Selected="@IsChipSelected"
                  ThemeColor="@themeColor"
-                 Text="Audio">
+                 Text="@themeColor">
             </TelerikChip>
         </div>
     }

@@ -10,24 +10,28 @@ position: 35
 
 # ChipList Appearance Settings
 
-You can control the appearance of the chips in the ChipList by setting the following attributes:
+You can control the appearance of the chips in the ChipList by setting the following parameters:
 
-* [FillMode](#fillmode)
-* [Rounded](#rounded)
-* [Size](#size)
+* [`FillMode`](#fillmode)
+* [`Rounded`](#rounded)
+* [`Size`](#size)
 
 You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
 
+Also see how to set [`ThemeColor`](slug:chip-appearance#themecolor) and [`FillMode`](slug:chip-appearance#fillmode) separately for each [chip in the ChipList](slug:chiplist-bound).
+
 ## FillMode
 
-The `FillMode` controls how the individual chip is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Chip.FillMode` class:
+The `FillMode` controls how all the chips are filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Chip.FillMode` class:
 
 | Class members | Manual declarations |
 |------------|--------|
 |`Solid` <br /> default value|`solid`|
 |`Outline`|`outline`|
 
->caption The built-in Fill modes
+You can also set `FillMode` separately for each chip in the ChipList through a [property of the data item](slug:chiplist-bound).
+
+>caption Using ChipList FillMode
 
 ````RAZOR
 @* These are all built-in fill modes *@
@@ -86,7 +90,7 @@ The `Rounded` parameter applies the `border-radius` CSS rule to the chip to achi
 |`Large`|`lg`|
 |`Full`|`full`|
 
->caption The built-in values of the Rounded attribute
+>caption Using ChipList Rounded
 
 ````RAZOR
 @* The built-in rounded edges of the chip.  *@
@@ -144,7 +148,7 @@ You can increase or decrease the size of the chips by setting the `Size` paramet
 | `Medium` <br /> default value  |`md`|
 | `Large`   |`lg`|
 
->caption The built-in chip sizes
+>caption Using ChipList Size
 
 ````RAZOR
 @{
@@ -191,3 +195,7 @@ You can increase or decrease the size of the chips by setting the `Size` paramet
 ````
 
 @[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder)
+
+## See Also
+
+* [Set ThemeColor for each chip in the ChipList](slug:chiplist-bound)
@@ -16,112 +16,153 @@ This article explains how to provide data to a ChipList component, and the prope
 
 ## Data Binding Features
 
-The ChipList has features that map to properties in the component model class. The following example uses property names that will work automatically, with no additional ChipList configuration.
+The ChipList has features that map to properties in the component model class.
+
+### Schema
+
+The table below lists the available data binding parameters for the Blazor ChipList component. Use them when your model property names are different from the default values.
+
+| ChipList Parameter | Default Value | Description |
+|----------|----------|----------|
+| `DisabledField`| `"Disabled"` | Defines if the chip is disabled (non-clickable). |
+| `FillModeField`| `"FillMode"` | Defines the [`FillMode` of each chip](slug:chip-appearance#fillmode). |
+| `IconField` | `"Icon"` | The icon that renders in the chip. See [Icons](#icons) below. |
+| `RemovableField`| `"Removable"` | Defines if the users can remove the chip. |
+| `TextField` | `"Text"` | The text that renders in the chip. |
+| `ThemeColorField`| `"ThemeColor"` | Defines the [`ThemeColor` of each chip](slug:chip-appearance#themecolor). |
+
+#### Icons
+
+The `IconField` model property can hold:
+
+* A property of the static `SvgIcon` class;
+* A member of the `FontIcon` enum;
+* A `string` that is a CSS class for a custom icon.
+
+@[template](/_contentTemplates/common/icons.md#font-icons-css-note)
+
+## Examples
+
+### Default Property Names
+
+The following example uses property names that work automatically with no additional ChipList configuration.
 
 >caption Using default property names in the ChipList model class
 
 ````RAZOR
-<TelerikChipList Data="@ChipListData"></TelerikChipList>
+<TelerikChipList Data="@ChipListData" />
 
 @code {
-    private List<ChipModel> ChipListData { get; set; } = new List<ChipModel>() {
+    private List<ChipModel> ChipListData { get; set; } = new()
+    {
         new ChipModel()
         {
-            Text = "Audio",
-            Icon = SvgIcon.FileAudio,
-            Disabled = false,
-            Removable = true
+            Text = "Solid Base",
+            Icon = SvgIcon.Sparkles
         },
         new ChipModel()
         {
-            Text = "Video",
-            Icon = SvgIcon.FileVideo,
-            Disabled = false,
-            Removable = false
+            Text = "Outline Info",
+            Icon = SvgIcon.QuestionCircle,
+            ThemeColor = ThemeConstants.Chip.ThemeColor.Info,
+            FillMode = ThemeConstants.Chip.FillMode.Outline
+        },
+        new ChipModel()
+        {
+            Text = "Solid Success",
+            Icon = SvgIcon.Star,
+            ThemeColor = ThemeConstants.Chip.ThemeColor.Success
+        },
+        new ChipModel()
+        {
+            Text = "Outline Warning Removable",
+            Icon = SvgIcon.ExclamationCircle,
+            ThemeColor = ThemeConstants.Chip.ThemeColor.Warning,
+            FillMode = ThemeConstants.Chip.FillMode.Outline,
+            Removable = true
         },
         new ChipModel()
         {
-            Text = "Image",
-            Icon = SvgIcon.FileImage,
-            Disabled = true,
-            Removable = false
+            Text = "Solid Error Disabled",
+            Icon = SvgIcon.XOutline,
+            ThemeColor = ThemeConstants.Chip.ThemeColor.Error,
+            Disabled = true
         }
     };
 
     public class ChipModel
     {
-        public string Text { get; set; }
-        public ISvgIcon Icon { get; set; }
         public bool Disabled { get; set; }
+        public string FillMode { get; set; } = string.Empty;
+        public object? Icon { get; set; }
         public bool Removable { get; set; }
+        public string Text { get; set; } = string.Empty;
+        public string ThemeColor { get; set; } = string.Empty;
     }
 }
 ````
 
-### Data Binding Schema
+### Custom Property Names
 
-The table below lists the available data binding parameters for the Blazor ChipList component. Use them when your model property names are different from the default values.
-
-| ChipList Parameter | Default Value | Description |
-|----------|----------|----------|
-| `DisabledField`| `"Disabled"` | Defines if the chip is disabled (non-clickable). |
-| `IconField` | `"Icon"` | The icon that renders in the chip. |
-| `TextField` | `"Text"` | The text that renders in the chip. |
-| `RemovableField`| `"Removable"` | Defines if the users can remove the chip. |
-
-#### Icons
-
-The `IconField` model property can hold:
-
-* A property of the static `SvgIcon` class;
-* A member of the `FontIcon` enum;
-* A `string` that is a CSS class for a custom icon.
-
-@[template](/_contentTemplates/common/icons.md#font-icons-css-note)
+The following example uses custom property names that need explicit ChipList configuration.
 
 >caption ChipList with custom model property names
 
 ````RAZOR
 <TelerikChipList Data="@ChipListData"
-                 TextField="@nameof(ChipModel.ChipText)"
-                 IconField="@nameof(ChipModel.ChipIcon)"
                  DisabledField="@nameof(ChipModel.ChipDisabled)"
-                 RemovableField="@nameof(ChipModel.ChipRemovable)">
-</TelerikChipList>
-
-@[template](/_contentTemplates/common/icons.md#font-icons-css-code)
+                 FillModeField="@nameof(ChipModel.ChipFillMode)"
+                 IconField="@nameof(ChipModel.ChipIcon)"
+                 RemovableField="@nameof(ChipModel.ChipRemovable)"
+                 TextField="@nameof(ChipModel.ChipText)"
+                 ThemeColorField="@nameof(ChipModel.ChipThemeColor)" />
 
 @code {
-    private List<ChipModel> ChipListData { get; set; } = new List<ChipModel>() {
+    private List<ChipModel> ChipListData { get; set; } = new()
+    {
         new ChipModel()
         {
-            ChipText = "Audio (SVG icon)",
-            ChipIcon = SvgIcon.FileAudio,
-            ChipDisabled = false,
-            ChipRemovable = true
+            ChipText = "Solid Base",
+            ChipIcon = SvgIcon.Sparkles
         },
         new ChipModel()
         {
-            ChipText = "Video (Font icon)",
-            ChipIcon = FontIcon.FileVideo,
-            ChipDisabled = false,
-            ChipRemovable = false
+            ChipText = "Outline Info",
+            ChipIcon = SvgIcon.QuestionCircle,
+            ChipThemeColor = ThemeConstants.Chip.ThemeColor.Info,
+            ChipFillMode = ThemeConstants.Chip.FillMode.Outline
+        },
+        new ChipModel()
+        {
+            ChipText = "Solid Success",
+            ChipIcon = SvgIcon.Star,
+            ChipThemeColor = ThemeConstants.Chip.ThemeColor.Success
+        },
+        new ChipModel()
+        {
+            ChipText = "Outline Warning Removable",
+            ChipIcon = SvgIcon.ExclamationCircle,
+            ChipThemeColor = ThemeConstants.Chip.ThemeColor.Warning,
+            ChipFillMode = ThemeConstants.Chip.FillMode.Outline,
+            ChipRemovable = true
         },
         new ChipModel()
         {
-            ChipText = "Image (disabled)",
-            ChipIcon = SvgIcon.FileImage,
-            ChipDisabled = true,
-            ChipRemovable = false
+            ChipText = "Solid Error Disabled",
+            ChipIcon = SvgIcon.XOutline,
+            ChipThemeColor = ThemeConstants.Chip.ThemeColor.Error,
+            ChipDisabled = true
         }
     };
 
     public class ChipModel
     {
-        public string ChipText { get; set; }
-        public object ChipIcon { get; set; }
         public bool ChipDisabled { get; set; }
+        public string ChipFillMode { get; set; } = string.Empty;
+        public object? ChipIcon { get; set; }
         public bool ChipRemovable { get; set; }
+        public string ChipText { get; set; } = string.Empty;
+        public string ChipThemeColor { get; set; } = string.Empty;
     }
 }
 ````

@@ -52,7 +52,7 @@ The <a href="https://www.telerik.com/blazor-ui/chiplist" target="_blank">Blazor
 
 ## Data Binding
 
-The Blazor ChipList requires a data source so that it can display items to the user. To provide a data source, use the `Data` property. [Read more about the Blazor ChipList data binding](slug:chiplist-bound).
+The Blazor ChipList requires a data source so that it can display items to the user. To provide a data source, use the `Data` property. Some properties of the ChipList model can enhance the behavior and appearance of each chip. [Read more about the Blazor ChipList data binding](slug:chiplist-bound).
 
 ## Selection
 
@@ -68,7 +68,7 @@ You can use the built-in events of the Blazor ChipList to react to chip selectio
 
 ## Appearance
 
-You can customize the appearance of the Blazor ChipList via a variety of built-in customization options. [Read more about the ChipList appearance settings...](slug:chiplist-appearance)
+You can customize the [appearance of the Blazor ChipList](slug:chiplist-appearance) via a variety of built-in customization options. Also see how to set [`ThemeColor`](slug:chip-appearance#themecolor) and [`FillMode`](slug:chip-appearance#fillmode) separately for each [chip in the ChipList](slug:chiplist-bound).
 
 ## ChipList Parameters
 
@@ -82,7 +82,7 @@ The table below lists the ChipList parameters. Also check the [ChipList API Refe
 | `AriaLabelledBy` | `string` | Maps to the `area-labelledby` attribute. Use this parameter to reference another element to define its accessible name. |
 | `Class` | `string` | An additional CSS class for the `<div class="k-chip-list">` element. Use it to [customize the component styles and override the theme](slug:themes-override). |
 | `Data` | `IEnumerable<TItem>` | The collection of the items that will be rendered as chips. |
-| `Removable` | `bool` | Specifies if the chip can be removed by the user. If set to `true` a remove icon will be rendered on each available chip. |
+| `Removable` | `bool` | Specifies if the chips can be removed by the user. If set to `true` a remove icon will be rendered on each available chip. |
 | `RemoveIcon` | `object` | Defines the icon that will be rendered if the `Removable` parameter is set to `true`. |
 
 ## Next Steps