Skip to content




A toggle-button can be in an on or off state. When the toggle-button is engaged, it toggles a state. The toggle-button uses the ptcs-behavior-binary/ptcs-behavior-binary.html behavior.

Usage Examples

Basic Usage

<ptcs-toggle-button variable="{{show}}" label="Show"></ptcs-toggle-button>

Assigns the variable show to true when the toggle-button state is on, and to false when it is off.

Start in on state (checked)

<ptcs-toggle-button variable="{{show}}" label="Show" checked></ptcs-toggle-button>

Explicit variable values

<ptcs-toggle-button variable="{{tool}}" label="Use tool" value-on="knife" value-off="fork"></ptcs-toggle-button>

Assigns the variable tool to "knife" whenever the toggle-button is on and "fork" otherwise.

Component API


Property Type Description Triggers a changed event
disabled Boolean Disables the toggle-button No
label String The displayed label No
labelalign String Determines the position of the label relative to the toggle-button: left (default) or right No
labelMaxWidth String The maximum width of the label No
state Boolean The current state. The state is on when set to true and off when set to false. No
tooltip String The tooltip that appears when hovering over the checkbox No
tooltipIcon String The icon for the tooltip No
valueOff any The value that the toggle-button assigns to variable when the toggle-button is turned off. Default: false No
valueOn any The value that the toggle-button assigns to variable when the toggle-button is turned on. Default: true No
variable any The variable that the toggle-button monitors and assigns No


No methods


The Parts of a Component

Part Description
label The container that contains the label
rectangle The rectangle element containing the movable switch
oval The movable on/off switch of the toggle-button

State attributes

Attribute Description Part
checked Current state (on: checked = true, off: checked = false) :host
disabled Is the checkbox disabled? :host
label The displayed label :host, label
labelalign The alignment of the button label. You can set it to left or right. The default is left. :host