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.

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

<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/>

Sizes #

Default switch checkbox input

Large switch checkbox input

Extra large switch checkbox input

<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"/>

API #

CFormSwitch #

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

Props #

Prop name	Description	Type	Values	Default
id	The id global attribute defines an identifier (ID) that must be unique in the whole document	string	-
invalid	Set component validation state to invalid.	boolean	-
label	The element represents a caption for a component.	string	-
model-value	The default name for a value passed using v-model.	boolean|string	-
size	Size the component large or extra large. Works only with switch.	string	'lg' | 'xl'
type	Specifies the type of component.	string	'checkbox', 'radio'	'checkbox'
valid	Set component validation state to valid.	boolean	-

Events #

Event name	Description	Properties
change	Event occurs when the checked value has been changed.
update:modelValue	Emit the new value whenever there’s a change event.