Switch

Switch between two opposing states

Examples

Base

Show code

HTML

<section>
    <o-field>
        <o-switch label="Default" />
    </o-field>
    <o-field>
        <o-switch v-model="isSwitched">
            {{ isSwitched }}
        </o-switch>
    </o-field>
    <o-field>
        <o-switch
            v-model="isSwitchedCustom"
            true-value="Yes"
            false-value="No">
            {{ isSwitchedCustom }}
        </o-switch>
    </o-field>
    <o-field>
        <o-switch disabled>Disabled</o-switch>
    </o-field>
</section>

JS

import { ref } from "vue";

const isSwitched = ref(false);
const isSwitchedCustom = ref("Yes");

css

Variants

Show code

HTML

<section>
    <o-field>
        <o-switch :model-value="true" label="Default" />
    </o-field>
    <o-field>
        <o-switch :model-value="true" variant="primary" label="Primary" />
    </o-field>
    <o-field>
        <o-switch :model-value="true" variant="info" label="Info" />
    </o-field>
    <o-field>
        <o-switch :model-value="true" variant="success" label="Success" />
    </o-field>
    <o-field>
        <o-switch :model-value="true" variant="warning" label="Warning" />
    </o-field>
    <o-field>
        <o-switch :model-value="true" variant="danger" label="Danger" />
    </o-field>
</section>

js

css

Sizes

Show code

HTML

<section>
    <o-field>
        <o-switch size="small" label="Small" />
    </o-field>
    <o-field>
        <o-switch label="Default" />
    </o-field>
    <o-field>
        <o-switch size="medium" label="Medium" />
    </o-field>
    <o-field>
        <o-switch size="large" label="Large" />
    </o-field>
</section>

js

css

Customise

Show code

HTML

<section>
    <o-field grouped>
        <o-switch v-model="isRounded" label="Rounded" />
        <o-switch
            v-model="position"
            true-value="left"
            false-value="right"
            label="Label on left" />
    </o-field>
    <o-field grouped>
        <o-field label="Variant">
            <o-select v-model="variant" expanded placeholder="Variant">
                <option value="null">Default</option>
                <option value="primary">Primary</option>
                <option value="success">Success</option>
                <option value="warning">Warning</option>
                <option value="danger">Danger</option>
            </o-select>
        </o-field>
        <o-field label="Passive Variant">
            <o-select
                v-model="passive"
                expanded
                placeholder="Passive Variant">
                <option value="null">Default</option>
                <option value="primary">Primary</option>
                <option value="success">Success</option>
                <option value="warning">Warning</option>
                <option value="danger">Danger</option>
            </o-select>
        </o-field>
        <o-field label="Size">
            <o-select v-model="size" expanded>
                <option value="">Default</option>
                <option value="small">small</option>
                <option value="medium">medium</option>
                <option value="large">large</option>
            </o-select>
        </o-field>
    </o-field>

    <o-switch
        :rounded="isRounded"
        :position="position"
        :size="size"
        :variant="variant"
        :passive-variant="passive"
        label="Sample" />
</section>

JS

import { ref } from "vue";

const size = ref("");
const variant = ref(null);
const passive = ref(null);
const isRounded = ref(false);
const position = ref("right");

css

Class props

'Classes applied to the element'

Switch component

Switch between two opposing states

<o-switch></o-switch>

Props

Prop name	Description	Type	Values	Default
ariaLabelledby	Accessibility label to establish relationship between the switch and control label'	string	-	Default function (see source code)
autocomplete	Same as native autocomplete options to use in HTML5 validation	string	-	From config: switch: {   autocomplete: "off" }
disabled	Same as native disabled	boolean	-	false
falseValue	Overrides the returned value when it's not checked	string|number|boolean	-	false
label	Input label, unnecessary when default slot is used	string	-
name	Name attribute on native checkbox	string	-
nativeValue	Same as native value	string|number|boolean	-
override	Override existing theme classes completely	boolean	-
passiveVariant	Color of the switch when is passive	string	primary, info, success, warning, danger, and any other custom color	From config: switch: {   passiveVariant: undefined }
position	Label position	string	-	"right"
required	Same as native required	boolean	-	false
rounded	Rounded style	boolean	-	true
size	Size of the control	string	small, medium, large	From config: switch: {   size: undefined }
trueValue	Overrides the returned value when it's checked	string|number|boolean	-	true
useHtml5Validation	Enable html 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
v-model		string|number|boolean	-
variant	Color of the control	string	primary, info, success, warning, danger, and any other custom color	From config: switch: {   variant: undefined }

Events

Event name	Properties	Description
update:modelValue	value string | number | boolean - updated modelValue prop	modelValue prop two-way binding
input	value string, number, boolean - input value event Event - native event	on input change event
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event

Slots

Name	Description	Bindings
default	Override the label, default is label prop

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$switch-active-background-color	$primary
$switch-action-background	#f5f5f5
$switch-background	$grey-light
$switch-border-radius	$base-border-radius
$switch-box-shadow	0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05)
$switch-disabled-opacity	$base-disabled-opacity
$switch-margin-label	0.5em
$switch-padding	0.2em
$switch-rounded-border-radius	$base-rounded-border-radius
$switch-width	2.75 * 1em

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$switch-active-background-color	$primary
$switch-action-background	#f5f5f5
$switch-background	$grey-light
$switch-border-radius	$base-border-radius
$switch-box-shadow	0 3px 1px 0 rgba(0, 0, 0, 0.05), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 3px 0 rgba(0, 0, 0, 0.05)
$switch-disabled-opacity	$base-disabled-opacity
$switch-margin-label	0.5em
$switch-padding	0.2em
$switch-rounded-border-radius	$base-rounded-border-radius
$switch-width	2.75 * 1em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$switch-spacer	0.5rem

See ➜ 📄 Full scss file