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
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.

API Reference

Properties for the ngs-segmented component.

PropTypeDefault
value
Sets a value, manually
any
disabled
Disable a control
boolean false
size
Control size
SegmentedTriggerSize: 'sm' | 'default' | 'lg' | stringdefault
EventDescription
valueChangeExecuted when a selected value changed

Properties for the ngs-segmented-button component.

PropTypeDefault
value*
Value of a button
any
disabled
Disable a button
booleanfalse
iconOnly
Hide text and show icon only
booleanfalse