Siticone Expressive Group Chip

The SiticoneExpressiveGroupChip is a sophisticated choice control designed for filtering, tagging, and single-choice selection scenarios. It merges the aesthetics of Material Design chips with advanced functionality like Radio Button Grouping, animated checkmark transitions, fluid physics, and morphing squeeze effects. When multiple chips share a GroupName, they automatically manage mutual exclusivity.

Grouping & Selection

Configure how the chip behaves as part of a selection group.

Property	Type	Description & Usage Example
`GroupName`	string	chip.GroupName = "Categories"; The identifier for the group. Any chips sharing this name within the same parent container will act as a radio group (only one can be selected at a time).
`IsSelected`	bool	chip.IsSelected = true; Gets or sets the selection state. Setting this to true triggers the selection animation and deselects other chips in the group.

Animated Checkmark

Customize the stroke-drawing animation that appears when the chip is selected.

Property	Type	Description & Usage Example
`CheckMarkPosition`	CheckPosition	chip.CheckMarkPosition = CheckPosition.Left; Determines if the checkmark appears to the left or right of the text.
`CheckMarkColor`	Color	chip.CheckMarkColor = Color.White; The color of the animated check stroke.
`CheckMarkSize`	float	chip.CheckMarkSize = 14f; The visual size (width/height) of the checkmark icon.
`CheckMarkStrokeThickness`	float	chip.CheckMarkStrokeThickness = 2.5f; The thickness of the checkmark lines.
`CheckMarkTextGap`	int	chip.CheckMarkTextGap = 10; The spacing between the checkmark and the text label.

Appearance & Colors

Define the visual style for both idle and selected states.

Property	Type	Description & Usage Example
`FillColor`	Color	chip.FillColor = Color.WhiteSmoke; Background color when unselected.
`SelectedFillColor`	Color	chip.SelectedFillColor = Color.DodgerBlue; Background color when selected.
`SelectedForeColor`	Color	chip.SelectedForeColor = Color.White; Text color when selected.
`HoverFillColor`	Color	chip.HoverFillColor = Color.AliceBlue; Background color on hover (unselected).
`TransitionSpeed`	float	chip.TransitionSpeed = 0.15f; Controls the speed of color morphs and checkmark animation (0.01 - 1.0).

Expressive Physics

Features the same advanced physics engine as other Expressive controls.

Property	Type	Description & Usage Example
`LiquidEffect`	bool	chip.LiquidEffect = true; Enables fluid wave simulation for shape transitions.
`SqueezeOnPress`	bool	chip.SqueezeOnPress = true; If true, the chip indents slightly when pressed.
`BorderRadius`	int	chip.BorderRadius = 20; Corner roundness. Higher values create a pill shape.

Public Methods

Programmatic Interaction

// Simulates a full click with animation.
chip.PerformClickEx();

// Simulates a click with a ripple starting from a specific coordinate.
chip.PerformRippleClick(new Point(10, 10));

// Resets all visual states immediately (stops animations).
chip.ResetVisuals();

Events

Selection Changed

// Occurs when the IsSelected property changes.
chip.SelectionChanged += (s, e) => 
{
                if (e.IsSelected)
    {
                Debug.WriteLine($"Chip in group '{e.GroupName}' selected.");
                ApplyFilter(chip.Text);
    }
};

Detailed Usage Examples

Example 1: Filter Chips

A horizontal list of filter options where only one can be active.

C# - Filter Group

public void SetupFilters()
{
                // Create category chips
                string[] categories = { "All", "Music", "Videos", "Images" };
    
                foreach (var cat in categories)
    {
                var chip = new SiticoneExpressiveGroupChip();
        chip.Text = cat;
        chip.GroupName = "FileFilters";
        chip.Size = new Size(100, 40);
        chip.BorderRadius = 20;
        
                // Styling
        chip.FillColor = Color.WhiteSmoke;
        chip.SelectedFillColor = Color.Black;
        chip.SelectedForeColor = Color.White;
        chip.CheckMarkColor = Color.Cyan;
        
                // Add to layout
        flowLayoutPanel1.Controls.Add(chip);
    }
    
                // Select "All" by default
    ((SiticoneExpressiveGroupChip)flowLayoutPanel1.Controls[0]).IsSelected = true;
}

Example 2: Size Selector (Product Page)

Using chips for product size selection (S, M, L, XL).

C# - Size Selector

public void SetupSizeSelector()
{
    chipSmall.GroupName = "Sizes";
    chipMedium.GroupName = "Sizes";
    chipLarge.GroupName = "Sizes";
    
                // Apply a theme to all
                foreach (var chip in new[] { chipSmall, chipMedium, chipLarge })
    {
        chip.ApplyTheme(SiticoneExpressiveGroupChip.ThemePreset.RoyalBlue);
        chip.CheckMarkPosition = SiticoneExpressiveGroupChip.CheckPosition.Right;
        chip.TransitionSpeed = 0.2f; // Faster animation
    }
}