UxToggle

components/ux/Toggle.vue

Toggle switch with styled pill track and circle, configurable size, and disabled state.

label prop
#label slot
checked: true · slotChecked: false
components/ux/Toggle.vue

Usage

<UxToggle label = "—" :disabled = "false" :permaChecked = "false" size = "medium" :reverse = "false" > Content here </UxToggle>

Props

PropTypeDefaultDescription
labelString''Label text
disabledBooleanfalseDisables the toggle
permaCheckedBooleanfalseForces checked visual state
sizeString'medium'micro, tiny, small, medium, large
reverseBooleanfalseLabel on left, toggle on right

Slots

SlotDescription
defaultThe <input type="checkbox"> element
labelRich label content (overrides label prop)

Related