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