Class UISegmentedControl

An iOS-style segmented control — a compact row of mutually exclusive option buttons. Suitable for 2–5 options where a full tab group would be too heavy.

Bind [(value)] to track the active segment id. The selection pill slides smoothly between segments by default; set [animateSelection]="false" to disable the animation.

Example

<ui-segmented-control
  [items]="views"
  [(value)]="activeView"
/>

Index

Constructors

constructor

Properties

animateSelection ariaLabel disabled items value

Constructors

constructor

new UISegmentedControl(): UISegmentedControl
Returns UISegmentedControl
- Defined in packages/ui-kit/src/lib/segmented-control/segmented-control.component.ts:77

Properties

`Readonly`animateSelection

animateSelection: InputSignal<boolean> = ...

Whether to animate the selection pill sliding between segments. Defaults to true.

`Readonly`ariaLabel

ariaLabel: InputSignal<string> = ...

Accessible label for the radiogroup.

`Readonly`disabled

disabled: InputSignal<boolean> = ...

Disable the entire control.

`Readonly`items

items: InputSignal<SegmentedItem[]> = ...

Items to render as segments.

`Readonly`value

value: ModelSignal<string> = ...

The id of the currently active segment (two-way).

Class UISegmentedControl

Example

Index

Constructors

Properties

Constructors

constructor

Returns UISegmentedControl

Properties

`Readonly`animateSelection

`Readonly`ariaLabel

`Readonly`disabled

`Readonly`items

`Readonly`value

Settings

On This Page

Class UISegmentedControl

Example

Index

Constructors

Properties

Constructors

constructor

Returns UISegmentedControl

Properties

ReadonlyanimateSelection

ReadonlyariaLabel

Readonlydisabled

Readonlyitems

Readonlyvalue

Settings

On This Page

`Readonly`animateSelection

`Readonly`ariaLabel

`Readonly`disabled

`Readonly`items

`Readonly`value