Segmented Control
Pill-shaped single-select toggle. Tighter than ButtonGroup, ideal for filter switches like 'All / Active / Archived'. Generic over TValue.
Filter toggle — with counts
Each option can carry an optional Count badge
Use this for list filters where the user wants to know how many items each segment holds.
Filter: active
razor
private readonly IReadOnlyList<SegmentedControl<string>.Option> _statusOptions = new[]
{
new SegmentedControl<string>.Option { Label = "All", Value = "all", Count = "152" },
new SegmentedControl<string>.Option { Label = "Active", Value = "active", Count = "48" },
new SegmentedControl<string>.Option { Label = "Archived", Value = "archived", Count = "104" }
};
<SegmentedControl TValue="string"
Options="_statusOptions"
Value="@_status"
ValueChanged="@((string v) => _status = v)"
AriaLabel="Filter by status" />Sizes
sm / md / lg
razor
<SegmentedControl TValue="string" Size="sm" Options="_options" Value="@_view" ValueChanged="..." />
<SegmentedControl TValue="string" Size="md" Options="_options" Value="@_view" ValueChanged="..." />
<SegmentedControl TValue="string" Size="lg" Options="_options" Value="@_view" ValueChanged="..." />Full width
FullWidth="true" for narrow toolbars
Stretches the control to fill its container; segments share equal width.
razor
<SegmentedControl TValue="string"
Options="_options"
Value="@_view"
ValueChanged="@((string v) => _view = v)"
FullWidth="true" />