Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
68
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Purchase

Segmented Control

Segmented lets users choose one value from a small set of mutually exclusive options. Use it for compact mode switches, view options, period filters, display density, selection mode, chart or table mode, and short settings where every option should stay visible.

Use ngs-segmented as the control and ngs-segmented-button for each option. Bind the selected value with value, valueChange, ngModel, or formControlName. Add ngsSegmentedIcon for icons and iconOnly when the label is intentionally hidden.

Do not use Segmented for route or page navigation, independent on/off toggles, long option lists, rich option cards, dropdown choices, or fixed color palettes. Use Tabs, Navigation, ButtonToggle, SlideToggle, Radio, RadioCard, Select, Autocomplete, or ColorSwitcher when those match the job better.

The NgStarter Angular Segmented component lets you let users choose one value from a compact set of mutually exclusive modes or options. Use ngs-segmented with ngs-segmented-button when a short set of options should stay visible and only one value can be selected. It includes examples for Basic segmented control, Segmented control sizes, Segmented control disabled, and Segmented control with icons.

Basic segmented control

Use a basic segmented control when the user chooses one short value from a small visible set.

Selected value: monthly

Segmented control sizes

Use size variants to fit the control into dense toolbars, filters, panels, or larger form areas.

Segmented control disabled

Disable the whole control or individual options when a mode is visible but not currently available.

Segmented control with icons

Add icons when they help users scan compact mode choices, while still keeping clear text labels.

Segmented control with icons only

Use icon-only segmented buttons only for familiar actions or modes with accessible labels supplied elsewhere.

Segmented control with FormControl

Use Segmented with reactive forms when the selected mode is part of a larger form or filter model.

Daily
Weekly
Monthly
Yearly
Selected value: daily

Segmented control with ngModel

Use ngModel for simple template-driven examples where a single value controls the selected option.

Daily
Weekly
Monthly
Yearly
Selected period: weekly