CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Hire Us! We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.
  • Give us a star ⭐️ on Github.

Vue Switch Component

Create consistent cross-browser and cross-device switch component.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

  • Angular Switch
  • Bootstrap Switch
  • React Switch

Switches #

A switch has the markup of a custom checkbox but uses the switch boolean properly to render a toggle switch. Switches also support the disabled attribute.

<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" checked/>
<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" checked disabled/>
1
2
3
4

Sizes #

<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>
1
2
3

API #

CFormSwitch #

import { CFormSwitch } from '@coreui/vue'
// or
import CFormSwitch from '@coreui/vue/src/components/form/CFormSwitch'
1
2
3

Props #

Prop nameDescriptionTypeValuesDefault
idThe id global attribute defines an identifier (ID) that must be unique in the whole documentstring-
invalidSet component validation state to invalid.boolean-
labelThe element represents a caption for a component.string-
model-valueThe default name for a value passed using v-model.boolean|string-
sizeSize the component large or extra large. Works only with switch.string'lg' | 'xl'
typeSpecifies the type of component.string'checkbox', 'radio''checkbox'
validSet component validation state to valid.boolean-

Events #

Event nameDescriptionProperties
changeEvent occurs when the checked value has been changed.
update:modelValueEmit the new value whenever there’s a change event.
On this page
  • Switches
    • Sizes
  • API
    • CFormSwitch
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.