Package LumeoA11yfocus-managedkeyboardradioradiogroupTested Tier 3 · 19 tests View source ↗

Segmented

An iOS-style segmented control for switching between options.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<Segmented />

Tested Tier 3 · A11y + behavior

Render Behavior A11y Keyboard Scale E2E

19 tests across 4 files. Auto-generated from the test suite.

Basic

Block (Full Width)

With Disabled Option

SegmentedItem Children

With Icons

Prop	Type	Default	Description
Value	string?	—	The selected segment's value. Uncontrolled when ValueChanged has no delegate — the component then owns the live selection internally.
Options	List<SegmentedOption>?	—	Data-driven options. When set, takes precedence over ChildContent. Leave null and pass SegmentedItem children for the compound-component flavour.
ChildContent	RenderFragment?	—	Compound-mode content — one or more SegmentedItem. Ignored when Options is set.
Block	bool	false	When true, the track and every segment stretch to fill the available width instead of sizing to their content.
Density	Density?	—	Per-control density override. When null, inherits from any ancestor DensityScope; if neither is set, matches the historical Comfortable default. Only the track + item padding shift between values.
Class	string?	—	Additional CSS classes merged onto the root div (the track).
AdditionalAttributes	Dictionary<string, object>?	—	Unmatched attributes splatted onto the root div.

Events

ValueChanged

EventCallback<string>

Fired when the user selects a different segment (click or arrow-key navigation). Binding it makes Value controlled.

Density falls back to an ancestor DensityScope, then Comfortable. See the Density guide.

Alternative to the Options list — declare segments as child markup instead. See "SegmentedItem Children" above.

Prop	Type	Default	Description
Value*	string	""	The value selected when this item is clicked. Must match one of the parent Segmented's expected values.
ChildContent	RenderFragment?	—	The segment's visible label.
IconContent	RenderFragment?	—	Optional leading icon slot.
Disabled	bool	false	Disables this segment, removing it from click and keyboard selection.
AdditionalAttributes	Dictionary<string, object>?	—	Unmatched attributes splatted onto the segment's button.

Property	Type	Default	Description
Label	string	""	Display text.
Value	string	""	Selection value.
IconContent	RenderFragment?	null	Optional icon before the label. Named IconContent to avoid shadowing the <Icon> component.
Disabled	bool	false	Disable this option.