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

Slide Toggle

Slide Toggle is a boolean switch for an on/off state. Use it for settings and preferences where checked=true means a feature or state is enabled.

Good examples include live updates, notifications, visibility, sidebar expanded or collapsed, animation on or off, table options, enable Wi-Fi, show archived, and allow comments. It works with checked, disabled, required, ngModel, formControlName, change, and toggleChange.

Slide Toggle has its own label pattern, so do not wrap it in ngs-form-field. Do not use it for choosing one value from many, multiple independent selections in a list, button-like mode groups, commands, navigation, or rich option cards. Use Radio, Segmented, Select, Checkbox, ButtonToggle, Button, Navigation, or RadioCard when those match the job better. For “I agree” or “accept terms” confirmations, prefer Checkbox because the user is confirming, not enabling a setting.

Slide Toggle Group

APITypeDefault
selector
Groups projected slide toggles with consistent vertical spacing.
ngs-slide-toggle-group
exportAs
Template export name for the group component.
ngsSlideToggleGroup
content
Accepts projected ngs-slide-toggle children.
ngs-slide-toggle
--ngs-slide-toggle-group-gap
CSS custom property controlling spacing between toggles.
CSS length--spacing(5)

Slide Toggle

PropTypeDefault
id
Unique identifier for the slide-toggle
stringngs-slide-toggle-n
name
Name of the slide-toggle
string | nullnull
labelPosition
Whether the label should appear after or before the slide-toggle
'before' | 'after'after
aria-label
Used to set the aria-label attribute on the underlying input element
string | nullnull
aria-labelledby
Used to set the aria-labelledby attribute on the underlying input element
string | nullnull
aria-describedby
Used to set the aria-describedby attribute on the underlying input element
string | nullnull
required
Whether the slide-toggle is required
booleanfalse
disabled
Whether the slide-toggle is disabled
booleanfalse
disableRipple
Whether ripples are disabled
booleanfalse
tabIndex
The tabIndex of the slide-toggle
number0
hideIcon
Whether to hide the icon inside the thumb
booleanfalse
color
Palette color of the slide-toggle
string | undefinedundefined
checked
Whether the slide-toggle is checked
booleanfalse
EventDescription
changeEvent emitted when the slide-toggle checked state will change
toggleChangeEvent emitted when the slide-toggle checked state will change