Toggle
A simple toggle, or 'switch', component.
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-toggleCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
<ts-toggle (selectionChange)="myChange($event)">Toggle</ts-toggle>Label position
The label can be displayed before or after the toggle. By default, it is after the toggle.
<ts-toggle labelPosition="before">Toggle</ts-toggle>Disabled
The control can be disabled via Input or by disabling the associated FormControl:
<ts-toggle [isDisabled]="true">Toggle</ts-toggle>myCtrl = new FormControl({ value: false, disabled: true });<ts-toggle [formControl]="myCtrl">Toggle</ts-toggle>Checked
The checked value can be set programmatically:
<ts-toggle [isChecked]="true">Toggle</ts-toggle>