Getting Started
Overview
Installation
Theme
Forms
Basic Inputs
Select
Custom Inputs
Components
Navigation
Components
69
Micro Charts
Libraries
Kanban Board
Image Designer
Video Player
Visual Builder
Content Editor
Data View
Latest npm version of @ngstarter-ui/componentsWeekly npm downloads of @ngstarter-ui/components
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.

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