syncfusion-content · rajendranr-5483 · Nov 19, 2025 · Nov 13, 2025 · Nov 14, 2025 · Nov 14, 2025
diff --git a/blazor-toc.html b/blazor-toc.html
@@ -1610,6 +1610,9 @@
 			<li>
 				<a href="/blazor/chip/types">Types</a>
 			</li>
+			<li>
+				<a href="/blazor/chip/events">Events</a>
+			</li>
 			<li>
 				<a href="/blazor/chip/customization">Customization</a>
 			</li>

diff --git a/blazor/chip/events.md b/blazor/chip/events.md
@@ -0,0 +1,182 @@
+---
+layout: post
+title: Events in Blazor Chip Component | Syncfusion
+description: Explore events in Syncfusion Blazor Chip component including Created, Deleted, Destroyed, OnBeforeClick, OnClick, OnDelete, and SelectionChanged events.
+platform: Blazor
+control: Chip
+documentation: ug
+---
+
+# Events in Blazor Chip Component
+
+This section explains the list of events of the Chip component which will be triggered for appropriate Chip actions.
+
+## Created
+
+The `Created` event triggers when the Chip component rendering is completed.
+
+```cshtml
+@using Syncfusion.Blazor.Buttons
+
+<SfChip Selection="SelectionType.Multiple" Created="@OnCreated">
+    <ChipItems>
+        <ChipItem Text="Small"></ChipItem>
+        <ChipItem Text="Medium"></ChipItem>
+        <ChipItem Text="Large"></ChipItem>
+        <ChipItem Text="Extra Large"></ChipItem>
+    </ChipItems>
+</SfChip>
+
+@code {
+    private void OnCreated(object args)
+    {
+        // Write your code here
+    }
+}
+```
+## Deleted
+
+The `Deleted` event triggers when a chip item is deleted.
+
+```cshtml
+@using Syncfusion.Blazor.Buttons
+
+<SfChip Selection="SelectionType.Multiple" EnableDelete="true">
+    <ChipItems>
+        <ChipItem Text="Small"></ChipItem>
+        <ChipItem Text="Medium"></ChipItem>
+        <ChipItem Text="Large"></ChipItem>
+        <ChipItem Text="Extra Large"></ChipItem>
+    </ChipItems>
+    <ChipEvents Deleted="@OnDeleted"></ChipEvents>
+</SfChip>
+
+@code {
+    private void OnDeleted(ChipDeletedEventArgs args)
+    {
+        // Write your code here
+    }
+}
+```
+## Destroyed
+
+The `Destroyed` event triggers when the Chip component is disposed.
+
+```cshtml
+@using Syncfusion.Blazor.Buttons
+
+<SfChip Selection="SelectionType.Multiple" Destroyed="@OnDestroyed">
+    <ChipItems>
+        <ChipItem Text="Small"></ChipItem>
+        <ChipItem Text="Medium"></ChipItem>
+        <ChipItem Text="Large"></ChipItem>
+        <ChipItem Text="Extra Large"></ChipItem>
+    </ChipItems>
+</SfChip>
+
+@code {
+    private void OnDestroyed(object args)
+    {
+        // Write your code here
+    }
+}
+```
+## OnBeforeClick
+
+The `OnBeforeClick` event triggers before a chip is clicked.
+
+```cshtml
+@using Syncfusion.Blazor.Buttons
+
+<SfChip Selection="SelectionType.Multiple">
+    <ChipItems>
+      <ChipItem Text="Small"></ChipItem>
+        <ChipItem Text="Medium"></ChipItem>
+        <ChipItem Text="Large"></ChipItem>
+        <ChipItem Text="Extra Large"></ChipItem>
+    </ChipItems>
+    <ChipEvents OnBeforeClick="@OnBeforeChipClick"></ChipEvents>
+</SfChip>
+
+@code {
+    private void OnBeforeChipClick(ChipEventArgs args)
+    {
+        // Write your code here
+    }
+}
+```
+
+## OnClick
+
+The `OnClick` event triggers when a chip is clicked.
+
+```cshtml
+@using Syncfusion.Blazor.Buttons
+
+<SfChip Selection="SelectionType.Multiple">
+    <ChipItems>
+        <ChipItem Text="Small"></ChipItem>
+        <ChipItem Text="Medium"></ChipItem>
+        <ChipItem Text="Large"></ChipItem>
+        <ChipItem Text="Extra Large"></ChipItem>
+    </ChipItems>
+    <ChipEvents OnClick="@OnChipClick"></ChipEvents>
+</SfChip>
+
+@code {
+    private void OnChipClick(ChipEventArgs args)
+    {
+        // Write your code here
+    }
+}
+```
+## OnDelete
+
+The `OnDelete` event triggers before removing the chip.
+
+```cshtml
+@using Syncfusion.Blazor.Buttons
+
+<SfChip Selection="SelectionType.Multiple" EnableDelete="true">
+    <ChipItems>
+        <ChipItem Text="Small"></ChipItem>
+        <ChipItem Text="Medium"></ChipItem>
+        <ChipItem Text="Large"></ChipItem>
+        <ChipItem Text="Extra Large"></ChipItem>
+    </ChipItems>
+    <ChipEvents OnDelete="@OnChipDelete"></ChipEvents>
+</SfChip>
+
+@code {
+    private void OnChipDelete(ChipEventArgs args)
+    {
+        // Write your code here
+    }
+}
+```
+## SelectionChanged
+
+The `SelectionChanged` event triggers when the selected chips are changed.
+
+```cshtml
+@using Syncfusion.Blazor.Buttons
+
+<SfChip Selection="SelectionType.Multiple">
+    <ChipItems>
+        <ChipItem Text="Small"></ChipItem>
+        <ChipItem Text="Medium"></ChipItem>
+        <ChipItem Text="Large"></ChipItem>
+        <ChipItem Text="Extra Large"></ChipItem>
+    </ChipItems>
+    <ChipEvents SelectionChanged="@OnSelectionChanged"></ChipEvents>
+</SfChip>
+
+@code {
+    private void OnSelectionChanged(SelectionChangedEventArgs args)
+    {
+        // Write your code here
+    }
+}
+```
+
+
diff --git a/blazor/color-picker/how-to/customize-color-picker.md b/blazor/color-picker/how-to/customize-color-picker.md
@@ -76,9 +76,7 @@ By default, the Palette will be rendered with default colors. To load custom col
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png)" %}
 
 ## Hide input area from picker
 
@@ -92,9 +90,7 @@ In the following sample, the Color Picker is rendered without input area.
 <h4>Choose a color</h4>
 <SfColorPicker ModeSwitcher="false" CssClass="e-hide-value"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.png)" %}
 
 ## Custom handle
 
@@ -126,6 +122,4 @@ The following sample shows the customized Color Picker handle.
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png)" %}
diff --git a/blazor/color-picker/how-to/disable-color-picker.md b/blazor/color-picker/how-to/disable-color-picker.md
@@ -19,6 +19,4 @@ The following example shows the `Disabled` state of Color Picker component.
 <h4>Choose a color</h4>
 <SfColorPicker Disabled="true"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png)" %}
diff --git a/blazor/color-picker/how-to/hide-control-buttons.md b/blazor/color-picker/how-to/hide-control-buttons.md
@@ -17,6 +17,4 @@ Color Picker can be rendered without control buttons (Apply/Cancel). In this cas
 <h4>Choose a color</h4>
 <SfColorPicker ShowButtons="false"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png)" %}
diff --git a/blazor/color-picker/how-to/no-color-support.md b/blazor/color-picker/how-to/no-color-support.md
@@ -40,9 +40,7 @@ To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png)" %}
 
 >If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property.
 
@@ -130,6 +128,4 @@ The following sample shows the color palette with custom no color option.
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.png)" %}
diff --git a/blazor/color-picker/how-to/render-palette-alone.md b/blazor/color-picker/how-to/render-palette-alone.md
@@ -19,8 +19,6 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor
 <h4>Choose a color</h4>
 <SfColorPicker Mode="ColorPickerMode.Palette" ModeSwitcher="false" ShowButtons="false"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png)" %}
 
 N> To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'.
diff --git a/blazor/color-picker/how-to/show-recent-color.md b/blazor/color-picker/how-to/show-recent-color.md
@@ -21,6 +21,4 @@ In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr
 <h4>Choose a color</h4>
 <SfColorPicker ShowRecentColors="true"></SfColorPicker>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png)" %}
diff --git a/blazor/color-picker/inline-rendering.md b/blazor/color-picker/inline-rendering.md
@@ -20,8 +20,6 @@ The following sample shows the inline type rendering of ColorPicker.
 <SfColorPicker Value="035a" Inline="true" ShowButtons="false"></SfColorPicker>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png)" %}
 
 N> The `ShowButtons` property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons).
diff --git a/blazor/color-picker/localization.md b/blazor/color-picker/localization.md
@@ -29,9 +29,7 @@ You can modify the default value in `.res` file added to Resource folder. Enter
 <SfColorPicker></SfColorPicker>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.png)" %}
 
 ## RTL
 
@@ -46,6 +44,4 @@ In the following example, Color Picker component is rendered in RTL mode with `a
 <SfColorPicker EnableRtl="true"></SfColorPicker>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png)" %}
diff --git a/blazor/color-picker/mode-and-value.md b/blazor/color-picker/mode-and-value.md
@@ -22,9 +22,7 @@ In the following sample, it will render the `Palette` at initial load.
 <SfColorPicker Mode="ColorPickerMode.Palette"></SfColorPicker>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.png)" %}
 
 ## Color value
 
@@ -39,8 +37,6 @@ In the following sample, the color value is set as `four` digit hex code, the la
 <SfColorPicker Value="035a" ModeSwitcher="false"></SfColorPicker>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png)" %}
 
 N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex code with or without `#` prefix.
diff --git a/blazor/combobox/cascading.md b/blazor/combobox/cascading.md
@@ -25,9 +25,7 @@ In the following example, when a country is selected in the first ComboBox, the
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLUsVBmKweKQSWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Cascading in Blazor ComboBox](./images/cascading/blazor_combobox_cascading.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLUsVBmKweKQSWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Cascading in Blazor ComboBox](./images/cascading/blazor_combobox_cascading.gif)" %}
 
 ## Cascading with other form field 
 
@@ -41,8 +39,6 @@ In the following example, the ComboBox displays a list of countries, and the tex
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthKWhhGKcenJwTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Cascading with other form field in Blazor ComboBox](./images/cascading/blazor_combobox_cascading-with-other-form-field.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthKWhhGKcenJwTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Cascading with other form field in Blazor ComboBox](./images/cascading/blazor_combobox_cascading-with-other-form-field.png)" %}
 
 N> [View Sample in Demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap5).
diff --git a/blazor/combobox/custom-value.md b/blazor/combobox/custom-value.md
@@ -11,6 +11,4 @@ documentation: ug
 
 You can add custom value to the ComboBox component. When the typed character(s) is not present in the list, a button will be shown in the popup list. By clicking on this button, the custom value character(s) get added to the existing list as a new item. Default value of [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) is `true`.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor ComboBox with custom value](./images/blazor-combobox-custom-value.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with custom value](./images/blazor-combobox-custom-value.png)" %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -1610,6 +1610,9 @@ @@
     			<li>
     				<a href="/blazor/chip/types">Types</a>
     			</li>
+    			<li>
+    				<a href="/blazor/chip/events">Events</a>
+    			</li>
     			<li>
     				<a href="/blazor/chip/customization">Customization</a>
     			</li>
@@ Expand Down @@