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.
This example shows the toggle in its simplest form, as a switch with default appearance and behavior.
This example compares color variants of the toggle so the effect on meaning and state readability is easy to see.
CSS variables let you change dimensions, radii, and track or handle colors without introducing a wrapper component just for styling.
Use wje-toggle when users need to enter values, choose options, or trigger form-related actions.
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
- Keep validation rules and error behavior consistent across the entire form.
- Show loading or disabled states during async operations.
- Split complex forms into smaller sections with immediate feedback.
| Description | Set checked attribute. |
| Attribute | checked |
| Type | boolean |
| Default | false |
| Description | Getter for the customErrorDisplay attribute. |
| Attribute | custom-error-display |
| Type | boolean |
| Default | false |
| Description | Disables user interaction with the component. |
| Attribute | disabled |
| Type | boolean |
| Default | - |
| Description | Marks the component as required for form validation. |
| Attribute | required |
| Type | boolean |
| Default | - |
| Description | Getter for the validateOnChange attribute. |
| Attribute | validate-on-change |
| Type | boolean |
| Default | false |
| Description | Getter for the value attribute. |
| Attribute | value |
| Type | string |
| Default | on |
| Name | Description |
|---|
wje-toggle:input | Emitted when the input value changes. |
wje-toggle:change | Emitted when the component value changes. |
No public methods available for this component.
| Name | Description |
|---|
native | The native toggle wrapper. |
input | The toggle input. |
toggle | The toggle part. |
| Name | Description |
|---|
--wje-toggle-color-base | The base background color of the toggle. Defines the default background color when the toggle is in an unselected state. |
--wje-toggle-width | The overall width of the toggle switch. Determines how wide the toggle component appears. |
--wje-toggle-height | The overall height of the toggle switch. Specifies how tall the toggle component appears. |
--wje-toggle-border-radius | The border radius of the toggle. Controls how rounded the corners of the toggle are. |
--wje-toggle-handle-width | The width of the toggle handle (knob). Determines the size of the handle for user interaction. |
--wje-toggle-handle-height | The height of the toggle handle (knob). Specifies the vertical size of the handle. |
--wje-toggle-handle-border-radius | The border radius of the toggle handle. Controls how rounded the handle is. |
--wje-toggle-handle-color | The color of the toggle handle. Accepts any valid CSS color, such as hex, rgb, or css variable. |
--wje-toggle-handle-shadow | The shadow applied to the toggle handle. Adds a subtle shadow effect for better visual clarity. |
--wje-toggle-handle-shadow-checked | The shadow applied to the toggle handle when it is in the checked (on) state. Provides visual feedback to indicate the toggle state. |
--wje-toggle-duration | The duration of the toggle animation in milliseconds. Controls how long the toggle animation lasts during state changes. |
--wje-toggle-curve | The easing curve used for the toggle animation. Defines the speed curve for the animation, enhancing the user experience with smooth transitions. |
| Name | Description |
|---|
default | The default slot for the toggle. |