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

When to use

Use wje-toggle when users need to enter values, choose options, or trigger form-related actions.

When not to use

Do not use it as a decorative element without interaction. Prefer presentational components in that case.

Accessibility

Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.

Best Practices

• 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.

Attributes and Properties

checked

Description	Get checked attribute.
Attribute	checked
Type	boolean
Default	-

disabled

Description	Disables user interaction with the component.
Attribute	disabled
Type	any
Default	-

required

Description	Marks the component as required for form validation.
Attribute	required
Type	any
Default	-

Events

Name	Description
wje-toggle:input	Emitted when the input value changes.
wje-toggle:change	Emitted when the component value changes.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
native	The native toggle wrapper.
input	The toggle input.
toggle	The toggle part.

CSS Custom Properties

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.

Slots

Name	Description
default	The default slot for the toggle.