type:[Boolean,String],

value:undefined,

reverse:Boolean,

class:[

'form-check-reverse':props.reverse,

[`form-switch-${props.size}`]:props.size,

'is-invalid':props.invalid,

'is-valid':props.valid,

other_frameworks:switch

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.

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.

::: demo

<CFormSwitchlabel="Default switch checkbox input"id="formSwitchCheckDefault"/>

Larger or smaller react switches? Add`size="lg"` or`size="xl"` for additional sizes.

::: demo

<CFormSwitchlabel="Default switch checkbox input"id="formSwitchCheckDefault"/>

Put your switches on the opposite side by adding`reverse` boolean property.

::: demo

<CFormSwitchreversetype="radio"id="reverseFormSwitch1"label="Reverse switch"/>

<CFormSwitchreversetype="radio"id="reverseFormSwitch2"label="Disabled reverse switch"disabled/>

:::

!!!include(./api/form/CFormSwitch.api.md)!!!