Switch

Basic Usage

Switch

isOn.value === false

Iron

Blind

IWHBYD

skulls.value === []

<script setup>
import { useModel } from '@vrgl/vergil'
import { Switch } from '@vrgl/vergil/components'
const isOn = useModel(false)
const skulls = useModel([])
</script>

<template>
    <!-- Single boolean value -->
    <Switch v-model="isOn" label="Switch"/>

    <!-- Multiple values -->
    <Switch v-model="skulls" value="iron" label="Iron"/>
    <Switch v-model="skulls" value="blind" label="Blind"/>
    <Switch v-model="skulls" value="iwhbyd" label="IWHBYD "/>
</template>

Attributes

Value

In order to bind multiple switches to a component model, all switches must include the value attribute and the model's value must be an array. The model's array value includes the value of selected switches. Were the model's value not an array, value has no effect.

TIP

The checked prop may be used to provide an initial value without a model.

Props

On-state value

value[-on]: (boolean | string) = true

The value-on prop is the value assigned to the Switch's model value when it gets checked, and the value of the underlying input[type="checkbox"] element's value attribute.

Off-state value

value-off: (boolean | string) = false

The value-off prop is the value assigned to the Switch's model value when it gets unchecked. If value-on is a string, value-off defaults to an empty string ('').

Track

track: ("on" | "off")

<Switch track="off"/>
<Switch track="on"/>

Labels

label-on: string

label-off: string

MiniMarkup

<Switch label-on="On" label-off="Off"/>

OffOn

Highlight labels

highlight: boolean

<Switch highlight track="on" label-on="Yearly" label-off="Monthly"/>

MonthlyYearly

Icons

icon-on: string

icon-off: string

<Switch icon-off="light_mode" icon-on="dark_mode" track="on"/>

light_modedark_mode

Theme

theme: theme = 'brand'

Size

size: ('xs' | 'sm' | 'md' | 'lg' | 'xl') = 'md'

OffOn

OffOn

OffOn

OffOn

OffOn

Radius

radius: ('none' | 'sm' | 'md' | 'lg' | 'full') = 'full'

OffOn

OffOn

OffOn

OffOn

OffOn

Spacing

spacing: ('compact' | 'expanded') = ''

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

OffOn

Disabled

disabled: boolean

OffOn

Elements

element	tag	description
input	<input[type="checkbox"]>	Switch's underlying input element.

Anatomy

<div.form-field.switch/>

<div.form-field-label-wrapper/>

<label.form-field-label/>

<span.form-field-hint/>

<p.form-field-details.form-field-description/>

<div.switch-button/>

<input[type="checkbox"]/>

<label.switch-label-off/>

<span.switch-track/>

<span.switch-knob/>

<Icon.icon.switch-icon-off/>

<Icon.icon.switch-icon-on/>

<label.switch-label-on/>

<p.form-field-details.form-field-help/>

API Reference

Props

prop	type	default
checked	boolean
value	boolean | string	undefined
value-on	boolean | string	true
value-off	boolean | string	false
track	'on' | 'off'
label-on	string
label-off	string
highlight	boolean
icon-on	string
icon-off	string
disabled	boolean
label	string
hint	string
description	string
help	string
showErrros	boolean
descendant	boolean
theme	'brand' | 'user' | 'ok' | 'info' | 'warn' | 'danger' | 'neutral'	'brand'
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
radius	'none' | 'sm' | 'md' | 'lg' | 'full'	'full'
spacing	'' | 'compact' | 'extended'	''
validator	Function
eagerValidation	boolean
elements	object

Configuration options

Switch's configuration options allow to overwrite some Switch props' default values and may be overwritten under the switch root-level configuration option.

switch.<option>	type	default	global
theme	theme		✅
size	size		✅
radius	radius	'full'
spacing	spacing		✅