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

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.

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