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

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.

The NgStarter Angular Slide Toggle component lets you capture a boolean on/off setting where checked means enabled. Use ngs-slide-toggle for settings and preferences where checked=true means the feature or state is enabled. It includes examples for Basic Slide Toggle, Disabled Slide Toggle, Slide Toggle with Forms, and Slide toggle disabled.

Basic Slide Toggle

Use SlideToggle for one boolean setting where on means enabled and off means disabled.

Disabled Slide Toggle

Disable a SlideToggle when the current on/off state should be visible but cannot be changed.

Slide Toggle with Forms

Use SlideToggle with template-driven or reactive forms when the form stores a boolean preference.

Slide Toggle using a simple NgModel.

Slide Toggle inside of a Template-driven form

Slide Toggle inside of a Reactive form

Form Group Status: INVALID