Toggle

A button that stays pressed: a filter or a view option that is on or off.

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

const concepten = ref(true)
</script>

<template>
  <FsToggle v-model:pressed="concepten" label="Alleen concepten" />
</template>

Usage

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

const concepten = ref(false)
</script>

<template>
  <FsToggle v-model:pressed="concepten" label="Alleen concepten" />
</template>

The label is the same whether the toggle is pressed or not: say what it turns on, not "aan" or "uit". A setting that applies at once is a Switch; a choice sent with a form is a Checkbox. A toggle is never submitted and is not a link.

Examples

Variants

Secondary stands beside filters and buttons; ghost is for toolbars and table rows.

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

const filter = ref(true)
const werkbalk = ref(true)
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <FsToggle v-model:pressed="filter" label="Mijn orders" />
    <FsToggle v-model:pressed="werkbalk" variant="ghost" label="Mijn orders" />
  </div>
</template>

With an icon

An icon before the label, the same pressed or not.

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

const mijn = ref(false)
</script>

<template>
  <FsToggle v-model:pressed="mijn" label="Mijn orders" leading-icon="user" />
</template>

Icon only

icon makes the toggle square, and label becomes its hidden name, shown in a tooltip.

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

const filters = ref(false)
</script>

<template>
  <FsToggle v-model:pressed="filters" variant="ghost" icon="funnel" label="Filters tonen" />
</template>

Sizes

Default is 36px high; dense is 32px, for tables and toolbars.

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

<template>
  <div class="flex flex-wrap items-center gap-2">
    <FsToggle label="Concepten" />
    <FsToggle size="dense" label="Concepten" />
  </div>
</template>

Disabled

A disabled toggle stays focusable, so put the reason beside it and point to it with aria-describedby.

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

const pressed = ref(true)
</script>

<template>
  <div class="flex items-center gap-3">
    <FsToggle v-model:pressed="pressed" label="Alleen mijn klanten" disabled aria-describedby="toggle-reden" />
    <span id="toggle-reden" class="type-meta">Alleen beschikbaar voor planners.</span>
  </div>
</template>

Keyboard

Key	Does
Enter, Space	Presses or releases the toggle, unless it is disabled

API Reference

FsToggle

Prop	Type	Default	Description
variant	"secondary" | "ghost"	"secondary"	`secondary` beside filters and buttons, `ghost` in toolbars and table rows.
size	"default" | "dense"	"default"	`default` is 36px high; `dense` is 32px, for tables and toolbars.
label	string	required	The visible text, or the hidden name of an icon-only toggle. The same whether pressed or not: say what it turns on, not "on" or "off".
icon	"info" | "plus" | "pencil" | "trash" | "copy" | "x" | "download" | "upload" | "search" | "funnel" | "check" | "minus" | "external-link" | "eye" | "eye-off" | "settings" | "log-out" | "ellipsis" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "arrow-up-down" | "layout-dashboard" | "menu" | "circle-check" | "circle-x" | "triangle-alert" | "circle-question-mark" | "loader-circle" | "calculator" | "file-text" | "user" | "building" | "package" | "truck" | "euro" | "percent" | "clock" | "calendar" | "database" | "chart-column"		Makes the toggle icon-only and square: this icon, with `label` as its hidden name.
leadingIcon	"info" | "plus" | "pencil" | "trash" | "copy" | "x" | "download" | "upload" | "search" | "funnel" | "check" | "minus" | "external-link" | "eye" | "eye-off" | "settings" | "log-out" | "ellipsis" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "arrow-up" | "arrow-down" | "arrow-up-down" | "layout-dashboard" | "menu" | "circle-check" | "circle-x" | "triangle-alert" | "circle-question-mark" | "loader-circle" | "calculator" | "file-text" | "user" | "building" | "package" | "truck" | "euro" | "percent" | "clock" | "calendar" | "database" | "chart-column"		An icon before the label, the same pressed or not.
disabled	boolean	false	Unavailable for now: still focusable and announced, its presses blocked. Put the reason beside it.
pressed	boolean	false	Whether it is pressed. Without `v-model:pressed` it keeps its own state.

Event	Payload	Description
click	[event: MouseEvent]	A press, after `update:pressed`. Not emitted while disabled.
update:pressed	[value: boolean]	Sent with the new `pressed`, for `v-model:pressed`.