Switch

Turns one setting on or off, and the change applies at once.

<script setup lang="ts">
import { FsSwitch } from '@fivespark/ui'
import { ref } from 'vue'

const herinnering = ref(true)
</script>

<template>
  <FsSwitch v-model="herinnering" label="Herinnering versturen" />
</template>

Usage

<script setup lang="ts">
import { FsSwitch } from '@fivespark/ui'
import { ref } from 'vue'

const herinnering = ref(true)
</script>

<template>
  <FsSwitch v-model="herinnering" label="Herinnering versturen" />
</template>

The label names the setting and stays the same on and off. An answer a form needs, to be sent with a Submit, is a Checkbox. A button that stays pressed is a Toggle.

Examples

With a description

One short sentence under the label.

<script setup lang="ts">
import { FsSwitch } from '@fivespark/ui'
import { ref } from 'vue'

const herinnering = ref(false)
</script>

<template>
  <FsSwitch v-model="herinnering" label="Herinnering versturen" description="Drie dagen voor de vervaldatum." />
</template>

Busy

While the setting is being saved, busy blocks further presses and keeps focus. After a moment a spinner shows in the thumb. Say the result yourself, for example with a toast.

<script setup lang="ts">
import { FsSwitch } from '@fivespark/ui'
import { ref } from 'vue'

const opslaan = ref(true)
</script>

<template>
  <FsSwitch v-model="opslaan" label="Automatisch opslaan" busy />
</template>

Disabled and read-only

A disabled switch is unavailable. A read-only switch keeps its value fixed but stays focusable and submitted.

<script setup lang="ts">
import { FsSwitch } from '@fivespark/ui'
import { ref } from 'vue'

const aan = ref(true)
</script>

<template>
  <div class="flex flex-col gap-4">
    <FsSwitch v-model="aan" label="Orders synchroniseren" disabled />
    <FsSwitch v-model="aan" label="Planning delen met klanten" readonly />
  </div>
</template>

Keyboard

Key	Does
Space	Turns the switch on or off
Enter	Submits the form the switch is in, as the browser does; it does not toggle

API Reference

FsSwitch

Prop	Type	Default	Description
value	string	"on"	Submitted when on.
label	string		The visible name of the setting, the same on and off. Or the default slot.
description	string		One short sentence under the label. Or the `description` slot.
id	string		Without a field. In a field, the switch takes the field's.
disabled	boolean		Unavailable for now. In a field, the switch takes the field's.
readonly	boolean		Focusable and submitted, its value fixed. Say why in the field's description.
busy	boolean	false	While the setting saves: further presses are blocked and focus stays. Say the result yourself.
readonlyText	string		Replaces the hidden "alleen lezen" or "read-only".
modelValue	boolean	false	On or off.

Event	Payload	Description
update:modelValue	[value: boolean]	Sent with the new `modelValue`, for `v-model`.

Slot	Props	Description
default	any	The visible name of the setting, in place of `label`.
description	any	One short sentence under the label, in place of `description`.