Segmented control
@xui/segmented-controlA single-choice control as a row of segments — a compact toggle between a few mutually exclusive options. role="radiogroup" with one tab stop; arrow keys move between segments. Full ControlValueAccessor.
Install
pnpm add @xui/segmented-control Add the barrel to a standalone component's imports:
import { XuiSegmentedControlImports } from '@xui/segmented-control';
@Component({
imports: [XuiSegmentedControlImports],
// …
})Examples
Default
Loading preview…
<xui-segmented-control [options]="options" [(value)]="view" aria-label="View" />
<p class="text-foreground-muted mt-3 text-sm">View: {{ view }}</p>Small
Loading preview…
<xui-segmented-control size="sm" [options]="options" value="w" aria-label="Range" />Fill
Loading preview…
<xui-segmented-control class="w-96" fill [options]="options" value="all" aria-label="Filter" />API
A single-choice control laid out as a row of segments — a compact toggle between a few mutually exclusive options.
Variants
sizemdfillfalseInputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''sizeXuiSegmentedControlVariants['size']Control height, from the shared control scale.this.config.sizefillbooleanStretch the segments to share the control's full width equally.this.config.filloptionsreadonly XuiSegmentedOption<T>[]The segments, in order. Each carries the value it selects, its label, and whether it is disabled.[]ariaLabelstring | nullAccessible name for the control — what is being switched between.nullvalueT | nullThe chosen value. Two-way, and via ngModel/formControl.nulldisabledbooleanDisable every segment at once.false