Segmented Control Component

Filter: active

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" />

<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="..." />

<SegmentedControl TValue="string"
                  Options="_options"
                  Value="@_view"
                  ValueChanged="@((string v) => _view = v)"
                  FullWidth="true" />

Segmented Control

Filter toggle — with counts

Sizes

Full width