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");

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="secondary"
            label="Secondary" />
    </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>

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>

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="undefined">Default</option>
                <option value="primary">Primary</option>
                <option value="secondary">Secondary</option>
                <option value="success">Success</option>
                <option value="info">Info</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="undefined">Default</option>
                <option value="primary">Primary</option>
                <option value="secondary">Secondary</option>
                <option value="success">Success</option>
                <option value="info">Info</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<string>();
const passive = ref<string>();
const isRounded = ref(false);
const position = ref("right");

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
autocomplete	Same as native autocomplete options to use in HTML5 validation	string	-	From config: switch: {   autocomplete: "off" }
customValidity	Custom HTML 5 validation error to set on the form control	string | ((currentValue: unknown, state: ValidityState) => string)	-
disabled	Same as native disabled	boolean	-	false
falseValue	Overrides the returned value when it's not checked	unknown	-
id	Same as native id. Also set the for label for o-field wrapper - default is an uuid.	string	-	useId()
label	Input label, unnecessary when default slot is used	string	-
v-model	The input value state, use v-model to make it two-way binding	unknown	-
name	Name attribute on native checkbox	string	-
nativeValue	Same as native value	unknown	-
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	unknown	-
useHtml5Validation	Enable html 5 native validation	boolean	-	From config: {   useHtml5Validation: true }
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 | object - updated modelValue prop	modelValue prop two-way binding
input	value string | number | boolean | object - 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

SASS Variable	Default
$switch-active-background-color	var(--#{$prefix}primary)
$switch-action-background	#f5f5f5
$switch-background	var(--#{$prefix}grey-light)
$switch-border-radius	var(--#{$prefix}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	var(--#{$prefix}base-disabled-opacity)
$switch-margin-label	0.5em
$switch-padding	0.2em
$switch-rounded-border-radius	var( --#{$prefix}base-border-radius-rounded)
$switch-width	2.75 * 1em

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$switch-colors	var.$colors
$switch-width	2.75em
$switch-padding	0.2em
$switch-background-color	css.getVar("grey-light")
$switch-active-background-color	css.getVar("primary")
$switch-shadow	css.getVar("shadow")

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS Variable	Default
$switch-spacer	0.5rem

See ➜ 📄 Full scss file