---
description: >-
  A feature that visually confirms a chip's selected state by displaying a
  customizable checkmark, reinforcing user interactions and feedback.
---

# Selection Indicator

## Overview

The Selection Indicator feature in the chip control provides a clear visual cue when a chip is selected. It displays a checkmark within the chip that can be extensively customized in terms of color, size, thickness, scale, and padding. This indicator helps users easily recognize which chip is active, improving usability in scenarios where multiple chips are used to represent choices, filters, or tags.

***

### Key Points

| Aspect      | Details                                                                                                                                                                                                      |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Visibility  | **ShowCheckmark**: A Boolean property that determines whether the checkmark is displayed when the chip is selected.                                                                                          |
| Appearance  | **CheckmarkColor**: The color of the checkmark. **CheckmarkThickness**: The thickness of the checkmark lines. **CheckmarkScale**: A factor (0.2 to 1.0) that scales the checkmark relative to its container. |
| Layout      | **CheckmarkPadding**: Padding around the checkmark indicator. **CheckmarkWidth**: The width (in pixels) of the checkmark container area, impacting its overall size.                                         |
| Interaction | The checkmark automatically appears when the chip is selected, providing immediate visual feedback on the selection state.                                                                                   |

***

### Best Practices

| Practice                                | Explanation                                                                                                                                                          |
| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Choose high-contrast colors             | Select a CheckmarkColor that contrasts well with the chip's background and selected fill color to ensure the checkmark is easily visible.                            |
| Balance scale and thickness             | Adjust the CheckmarkScale and CheckmarkThickness to achieve a checkmark that is both visually appealing and clearly visible without overwhelming the chip's content. |
| Maintain consistency across UI elements | Ensure that the selection indicator style aligns with other selection cues in your application to provide a consistent user experience.                              |
| Consider user accessibility             | Use clear and distinct checkmark colors and sizes to support users with visual impairments, ensuring that the selection state is unmistakable.                       |

#### Code Example: Customizing the Selection Indicator

```csharp
// Create a chip with a customized selection indicator (checkmark)
var chipWithSelection = new SiticoneGroupChip
{
    Text = "Selectable Chip",
    // Enable the checkmark to be shown when selected
    ShowCheckmark = true,
    
    // Customize the appearance of the checkmark
    CheckmarkColor = Color.Green,
    CheckmarkThickness = 2.5f,
    CheckmarkScale = 0.7f, // Scale between 0.2 and 1.0
    CheckmarkPadding = new Padding(8, 8, 0, 8),
    CheckmarkWidth = 24
};

// Toggle the selection state on click (if EnableSelection is true)
chipWithSelection.SelectionChanged += (sender, e) =>
{
    Console.WriteLine("Chip selection state changed to: " + chipWithSelection.IsSelected);
};

this.Controls.Add(chipWithSelection);
```

***

### Common Pitfalls

| Pitfall                         | Explanation                                                                                                                                                                                         |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Poor color contrast             | Selecting a checkmark color that blends with the chip's background can make the selection indicator hard to see. Ensure the CheckmarkColor is distinct from both the fill and selected fill colors. |
| Over-scaling or under-scaling   | Using extreme values for CheckmarkScale (too close to 0.2 or 1.0) may result in a checkmark that is either too small to notice or too large, disrupting the chip layout.                            |
| Ignoring padding adjustments    | Insufficient CheckmarkPadding or an inappropriate CheckmarkWidth may cause the checkmark to overlap with other elements, compromising the chip's overall design.                                    |
| Inconsistent selection behavior | Failing to properly manage the selection state (using IsSelected) alongside the indicator settings might lead to confusing UI behavior, especially when combined with group management features.    |

#### Code Example: Avoiding Common Pitfalls

```csharp
// Create a chip ensuring proper balance between size, padding, and color contrast
var chipBalanced = new SiticoneGroupChip
{
    Text = "Balanced Selection Chip",
    ShowCheckmark = true,
    
    // Use a high-contrast checkmark color relative to the chip's background
    CheckmarkColor = Color.White,
    CheckmarkThickness = 2.0f,
    CheckmarkScale = 0.6f,
    CheckmarkPadding = new Padding(10),  // Uniform padding to prevent overlap
    CheckmarkWidth = 20
};

this.Controls.Add(chipBalanced);
```

***

### Usage Scenarios

| Scenario                   | Description                                                                                                                                   |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| Form Selection Controls    | Use chips with selection indicators in forms to allow users to clearly see which option is active, such as in surveys or preference settings. |
| Filter Chips in Dashboards | Implement checkmark indicators on chips representing filters so that users can easily identify active filters in data-rich environments.      |
| Tagging Systems            | In systems where tags represent selected items or keywords, a checkmark can denote which tags have been applied or are currently active.      |

#### Code Example: Filter Chips with Selection Indicator

```csharp
// Create filter chips for a dashboard interface
var chipAll = new SiticoneGroupChip
{
    Text = "All",
    ShowCheckmark = true,
    CheckmarkColor = Color.Blue,
    CheckmarkScale = 0.5f,
    CheckmarkThickness = 2f,
    CheckmarkPadding = new Padding(8),
    CheckmarkWidth = 18
};

var chipActive = new SiticoneGroupChip
{
    Text = "Active",
    ShowCheckmark = true,
    CheckmarkColor = Color.Blue,
    CheckmarkScale = 0.5f,
    CheckmarkThickness = 2f,
    CheckmarkPadding = new Padding(8),
    CheckmarkWidth = 18
};

var chipCompleted = new SiticoneGroupChip
{
    Text = "Completed",
    ShowCheckmark = true,
    CheckmarkColor = Color.Blue,
    CheckmarkScale = 0.5f,
    CheckmarkThickness = 2f,
    CheckmarkPadding = new Padding(8),
    CheckmarkWidth = 18
};

// Add chips to a panel representing filter options
filterPanel.Controls.Add(chipAll);
filterPanel.Controls.Add(chipActive);
filterPanel.Controls.Add(chipCompleted);
```

***

### Real Life Usage Scenarios

| Real Life Scenario         | Example                                                                                                                                                                     |
| -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| E-commerce Product Filters | In online shopping interfaces, chips with checkmarks can indicate which product filters (e.g., price range, brand) are active, improving the overall navigation experience. |
| Email Clients              | Email applications can use chips with selection indicators to highlight selected messages or categories, helping users easily manage their inbox.                           |
| Mobile Application Menus   | Mobile apps can leverage selection indicators in navigation menus to clearly show which option is currently selected, enhancing the user experience on smaller screens.     |

#### Code Example: E-commerce Product Filter Chip

```csharp
// Create a chip for an e-commerce filter that visually indicates its selection state
var filterChip = new SiticoneGroupChip
{
    Text = "On Sale",
    ShowCheckmark = true,
    CheckmarkColor = Color.Red,
    CheckmarkThickness = 2.5f,
    CheckmarkScale = 0.7f,
    CheckmarkPadding = new Padding(8),
    CheckmarkWidth = 22
};

// When a filter chip is selected, update the product list accordingly
filterChip.SelectionChanged += (sender, e) =>
{
    if (filterChip.IsSelected)
    {
        // Apply the filter to the product list
        Console.WriteLine("Filter 'On Sale' selected.");
    }
    else
    {
        // Remove the filter from the product list
        Console.WriteLine("Filter 'On Sale' deselected.");
    }
};

filterPanel.Controls.Add(filterChip);
```

***

### Troubleshooting Tips

| Tip                               | Details                                                                                                                                                                        |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Verify property value ranges      | Ensure that CheckmarkScale is set between 0.2 and 1.0 and that CheckmarkThickness and CheckmarkWidth are within reasonable limits to prevent rendering issues.                 |
| Test visual consistency           | Check that the CheckmarkColor contrasts sufficiently with the chip’s background across different states (normal, hovered, selected) to ensure the indicator is always visible. |
| Monitor layout adjustments        | If the checkmark overlaps with the chip's text or other elements, adjust the CheckmarkPadding and CheckmarkWidth accordingly to maintain a balanced layout.                    |
| Debug selection state transitions | Ensure that the chip’s selection state (IsSelected) toggles correctly and that the checkmark appears or disappears as expected when the chip is clicked.                       |

***

### Review

| Review Aspect | Comments                                                                                                                                                                      |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Functionality | The Selection Indicator feature effectively enhances user feedback by clearly showing when a chip is selected, making it an important visual cue in interactive applications. |
| Customization | With properties controlling color, thickness, scale, padding, and width, developers have robust options to tailor the checkmark to fit their design requirements.             |
| Integration   | The feature integrates seamlessly into the chip control, requiring minimal additional coding to leverage the automatic display of the checkmark when the chip is selected.    |

***

### Summary

The Selection Indicator feature allows developers to add a customizable checkmark to the chip control, providing clear visual feedback for selected states. By adjusting properties such as CheckmarkColor, CheckmarkThickness, CheckmarkScale, CheckmarkPadding, and CheckmarkWidth, the checkmark can be tailored to fit various design themes and functional requirements. This feature is invaluable in scenarios where precise user selection and immediate visual confirmation are paramount.

***

### Additional Sections

#### Integration Checklist

| Item                          | Check                                                                                                                                   |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| Enable selection indicator    | Ensure `ShowCheckmark` is set to true on chips where selection feedback is needed.                                                      |
| Configure appearance settings | Verify that CheckmarkColor, CheckmarkThickness, CheckmarkScale, CheckmarkPadding, and CheckmarkWidth are set appropriately for your UI. |
| Test across states            | Confirm that the checkmark displays correctly in all states (selected, hovered, etc.).                                                  |
| Monitor event behavior        | Ensure that any logic linked to selection changes (e.g., via SelectionChanged events) is functioning as expected.                       |

#### FAQ

| Question                                                         | Answer                                                                                                                                                          |
| ---------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| What happens if ShowCheckmark is set to false?                   | The selection indicator (checkmark) will not be displayed, even if the chip is selected.                                                                        |
| Can I change the selection indicator properties at runtime?      | Yes, properties like CheckmarkColor, CheckmarkThickness, and CheckmarkScale can be updated dynamically, and the control will reflect these changes immediately. |
| How do I ensure the checkmark is visible against any background? | Choose a CheckmarkColor with sufficient contrast compared to the chip's FillColor or SelectedFillColor; testing on various themes is recommended.               |

***

This extensive documentation for the Selection Indicator feature provides developers with detailed insights, best practices, and practical code examples to effectively integrate and customize the checkmark that visually confirms a chip's selected state in .NET WinForms applications.
