Toggle

A switch component that toggles between two or three states with customizable icons and values. Features customizable appearance with support for indeterminate state, custom icons, labels, and color schemes. Ideal for boolean or tri-state input with visual feedback.

Extends: fieldComponent

Fields

Name

Code

Data Type

Description

Checked Icon

checkedIcon

text

Icon to display when toggle is in checked state

Unchecked Icon

uncheckedIcon

text

Icon to display when toggle is in unchecked state

Indeterminate Icon

indeterminateIcon

text

Icon to display when toggle is in indeterminate state

Indeterminate Value

indeterminateValue

text

Value to use for the indeterminate state

Toggle Indeterminate

toggleIndeterminate

boolean

Enables the third indeterminate state

Toggle True Value

trueValue

text

Value to use when toggle is checked

Toggle False Value

falseValue

text

Value to use when toggle is unchecked

Keep Color

keepColor

boolean

Maintains the color when toggle is inactive

UnChecked Icon Color

iconColor

text

Color of the unchecked icon

Left Label

leftLabel

boolean

Positions the label on the left side of the toggle

Toggle Label

toggleLabel

text

Label text displayed next to the toggle

Size

size

text

Size of the toggle component

Color

color

text

Color of the toggle when active

Dark

dark

boolean

Enables dark mode appearance

Label

label

multi-locale

Label for the toggle field

ID

resourceId

text

Unique identifier for the component

Style Classes

styleClasses

text

CSS classes for styling

Width

widthClass

text

Controls component width

Value

value

text

Current toggle state value

Visible

isVisible

boolean

Controls component visibility

Enabled

enabled

boolean

Controls whether component is enabled

Outlined

outlined

boolean

Shows component with outlined style

Events

Name

Description

onChange

Triggered when the toggle state changes

onBlur

Triggered when the toggle loses focus

onFocus

Triggered when the toggle gains focus