UI LibraryUI Library
Guide
Components
Styling
Repo
Guide
Components
Styling
Repo
  • Guide

    • Introduction
    • Getting Started
  • Components

    • CataUiAccordion
    • CataUiAccordionItem
    • CataUiAlert
    • CataUiAnchorMenu
    • CataUiBadge
    • CataUiButton
    • CataUiCollapse
    • CataUiDraggable
    • CataUiDropdown
    • CataUiDropover
    • CataUiFileTree
    • CataUiIcon
    • CataUiIconSwitch
    • CataUiInput
    • CataUiInputCheckbox
    • CataUiInputColor
    • CataUiInputDate
    • CataUiInputGroup
    • CataUiInputRadio
    • CataUiInputSearch
    • CataUiInputSelect
    • CataUiMasonry
    • CataUiMasonryTile
    • CataUiLogo
    • CataUiModal
    • CataUiPaginate
    • CataUiProgress
    • CataUiSpinner
    • CataUiStatusLabel
    • CataUiSwitch
    • CataUiTable
    • CataUiTableAG
    • CataUiTableFooter
    • CataUiTabs
    • CataUiTabSwitch
    • CataUiTooltip
  • Styling

    • Colors
    • Icons
    • Typography
    • Utils

CataUiSwitch

A simple toggle switch component that allows users to toggle between two states (on/off).

<CataUiSwitch label="Toggle switch" v-model="switchModel" />

Examples

Basic Usage

<CataUiSwitch v-model="switchState" />

With Label

<CataUiSwitch label="Enable notifications" v-model="notificationsEnabled" />

API

Props

PropDescriptionTypeDefaultRequired
labelText label displayed next to the switchString''false
v-modelThe switch state (true=on, false=off)Booleantrue

Events

The component uses defineModel() for two-way binding, which automatically emits update events when the switch state changes.

Slots

This component does not have any slots.

Prev
CataUiStatusLabel
Next
CataUiTable