Stylish
A horizontally connected row of toggle buttons for mutually exclusive selection among a small set of string-labeled options.
This is the Finish-layer component: it supplies the Stylish toggle rendering to the headless Structure layout ConnectedToggleRow, which owns arrangement and connection geometry. Each item occupies an equal weight within the row and stretches to the tallest sibling. Outline edges and corner radii are computed automatically from each item's index. The selected item is highlighted with selectedContainerColor and selectedContentColor; unselected items use unselectedContainerColor and unselectedContentColor. Selection changes trigger haptic feedback and smooth color animation.
Use this component for day-of-week pickers, view-mode switches, or any inline multi-option selection where exactly one option is active at a time.
Parameters
The list of string labels for each toggle segment.
The index of the currently selected item, or null if no item is selected.
Callback invoked with the index of the tapped item.
The modifier applied to the root layout.
The radius applied to the outer corners of the first and last items. Defaults to StylishTheme.dimensions.connectedCornerRadius (12 dp).
The horizontal gap between adjacent items. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
The inner padding of each toggle button. Defaults to 12 dp horizontal and 12 dp vertical.
The container color for the selected item. Defaults to MaterialTheme.colorScheme.primaryContainer.
The content color for the selected item. Defaults to MaterialTheme.colorScheme.onPrimaryContainer.
The container color for unselected items. Defaults to MaterialTheme.stylishComponentColors.groupedContainer.
The content color for unselected items. Defaults to MaterialTheme.colorScheme.onSurface.