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

The sample shows the toggle in its simplest form, i.e. as a toggle with default appearance and behavior.

Colors

The demonstration compares the color variations of the toggle component to see how they affect the meaning and readability of the state.

Custom CSS variables

Using CSS variables you can adjust the dimensions, radius and colors of the track and handle without the need for a custom wrapper component.

When to use

Use wje-toggle when the user enters a value, selects options, or performs an action on a form.

When not to use

Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.

Accessibility

Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.

Recommended practices

• Keep validation rules and error states consistent across the entire form.
• For asynchronous operations, display the load status or disabled status.
• For complex forms, prefer smaller sections and immediate feedback.

Attributes and properties

checked

Popis	Určuje, či je voľba checked zapnutá a ovplyvňuje správanie komponentu.
Atribút	checked
Typ	boolean
Predvolené	false

customErrorDisplay

Popis	Riadi validáciu alebo stavové hlášky pre voľbu custom-error-display.
Atribút	custom-error-display
Typ	boolean
Predvolené	false

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	boolean
Predvolené	-

required

Popis	Označí komponent ako povinný pre validáciu formulára.
Atribút	required
Typ	boolean
Predvolené	-

validateOnChange

Popis	Určuje, či je voľba validate-on-change zapnutá a ovplyvňuje správanie komponentu.
Atribút	validate-on-change
Typ	boolean
Predvolené	false

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	string
Predvolené	on

Events

Názov	Popis
wje-toggle:input	Vyvolá sa pri zmene vstupnej hodnoty.
wje-toggle:change	Vyvolá sa pri zmene hodnoty komponentu.

Methods

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
input	Štýluje shadow časť input.
toggle	Štýluje toggle slot a oblasť markera.

CSS custom variables

Názov	Popis
--wje-toggle-color-base	Vlastná CSS premenná, ktorá riadi color base.
--wje-toggle-width	Vlastná CSS premenná, ktorá riadi width.
--wje-toggle-height	Vlastná CSS premenná, ktorá riadi height.
--wje-toggle-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-toggle-handle-width	Vlastná CSS premenná, ktorá riadi handle width.
--wje-toggle-handle-height	Vlastná CSS premenná, ktorá riadi handle height.
--wje-toggle-handle-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-toggle-handle-color	Vlastná CSS premenná, ktorá riadi handle color.
--wje-toggle-handle-shadow	Vlastná CSS premenná, ktorá riadi tieň.
--wje-toggle-handle-shadow-checked	Vlastná CSS premenná, ktorá riadi tieň.
--wje-toggle-duration	Vlastná CSS premenná na štýlovanie komponentu (duration).
--wje-toggle-curve	Vlastná CSS premenná na štýlovanie komponentu (curve).

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.