Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Custom Inputs
Select
Components
Components
78
Micro Charts
Navigation
Libraries
Content Editor
Data View
Form Builder
Image Designer
Kanban Board
PDF Viewer
Video Player
Visual Builder
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
Buy License

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