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.
About
Vue Switch Components are a type of UI component that allows users to toggle between two states, usually represented as "on" or "off", "enabled" or "disabled", or "checked" or "unchecked".
When a user interacts with the component by clicking or tapping on it, the switch toggles its state, triggering an action or changing the appearance of the component. This type of component is often used in forms, settings panels, and other places where users need to turn something on or off or choose between two options.
Example
<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/>
Sizing
Larger or smaller react switches? Add size="lg" or size="xl" for additional 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"/>
Reverse
Put your switches on the opposite side by adding reverse boolean property.
<CFormSwitch reverse type="radio" id="reverseFormSwitch1" label="Reverse switch"/>
<CFormSwitch reverse type="radio" id="reverseFormSwitch2" label="Disabled reverse switch" disabled/>
Customizing
SASS variables
$form-switch-color: rgba($black, .25) !default;
$form-switch-width: 2em !default;
$form-switch-padding-start: $form-switch-width + .5em !default;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
$form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: background-position .15s ease-in-out !default;
$form-switch-focus-color: $input-focus-border-color !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
$form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
$form-switch-checked-bg-position: right center !default;
$form-switch-widths: (
lg: (
width: 1.75em,
height: 1.25em
),
xl: (
width: 2em,
height: 1.5em
)
) !default;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 | - | - |
| reverse 4.8.0+ | Put checkboxes or radios on the opposite side. | boolean | - | - |
| 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. |