Skip to content

ToggleButton

The ToggleButton has the markup of a custom checkbox but renders as a toggle switch.

Examples

html
<ToggleButton
    @toggle-button:click="handleToggleButton"
    on-label="Feature On"
    off-label="Feature Off"
    :default-on="false"
    class="text-primary-500"
/>

An example can be seen in /frontend/views/ComponentExamples.vue

Component Props

PropDescriptionOptions
on-labelthe label to displat when toggle is on
off-labelthe label to displat when toggle is off
default-ondefault the state of the toggle button to ontrue or false

Component Events

EventDescriptionArgs
@toggle-button:clickemits when the toggle button is clickedtoggle button checked value

CSS Classes

ClassDescription
--