Toggle

shadow

Toggle elements are small interactive controls that allow you to switch between two states. You can activate them with a click of the mouse. They are most often used to activate and deactivate functionalities or to switch between showing and hiding other elements.

Basic Usage

Colors

Attributes and Properties

checked

Description	If true, toggle is activated.
Attribute	checked
Type	boolean
Default	false

color

Description	The color to use from your application's color palette. The default options are "primary", "success", "warning", "danger", "complete", and "dark". For more information on colors, visit Customization Basics.
Attribute	color
Type	"complete" ｜ "danger" ｜ "dark" ｜ "primary" ｜ "success" ｜ "warning" ｜ string ｜ undefined
Default	undefined

disabled

Description	If true, the toggle element cannot be interacted with.
Attribute	disabled
Type	boolean
Default	false

name

Description	Defines a name attribute that is important, for example, when used in forms.
Attribute	name
Type	string
Default	this.inputId

Events

Name	Description
change	Called when the element state changes.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
input	Refers to an input element of type checkbox
toggle	Refers to the inner div wrapping element

CSS Custom Properties

Name	Description
--wj-toggle-border-radius	Border radius of the toggle track
--wj-toggle-color-base	Background of the toggle handle
--wj-toggle-handle-border-radius	Background of the toggle handle when checked
--wj-toggle-handle-color	Border radius of the toggle handle
--wj-toggle-handle-height	Box shadow of the toggle handle
--wj-toggle-handle-shadow	Height of the toggle handle
--wj-toggle-handle-shadow-checked	Maximum height of the toggle handle
--wj-toggle-handle-width	Horizontal spacing around the toggle handle
--wj-toggle-height	Transition of the toggle handle
--wj-toggle-width	Width of the toggle handle

Slots

Name	Description
``	The default location of the element content.