Switch · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JSwitch } from '@juxtui/ui'

Usage #

<JSwitch v-model="enabled" label="Email notifications" />

Use a switch when the change applies immediately. When it only applies after submitting a form, use a checkbox.

Variants & examples #

Settings list#

Preview deploymentsBuild every pull request.

AnalyticsCollect anonymous usage metrics.

Early accessTry features before they ship.

<script setup lang="ts">
const settings = reactive({ previews: true, analytics: false, beta: false })
</script>

<template>
  <div class="flex flex-col divide-y divide-border-subtle rounded-lg border border-border dark:divide-border">
    <div class="p-4">
      <JSwitch v-model="settings.previews" label="Preview deployments" description="Build every pull request." />
    </div>
    <div class="p-4">
      <JSwitch v-model="settings.analytics" label="Analytics" description="Collect anonymous usage metrics." />
    </div>
    <div class="p-4">
      <JSwitch v-model="settings.beta" label="Early access" description="Try features before they ship." />
    </div>
  </div>
</template>

Sizes and states#

Small

Medium

Disabled, on

Disabled, off

<script setup lang="ts">
const a = ref(true)
const b = ref(true)
</script>

<template>
  <div class="flex flex-col gap-4">
    <JSwitch v-model="a" size="sm" label="Small" />
    <JSwitch v-model="b" label="Medium" />
    <JSwitch :model-value="true" label="Disabled, on" disabled />
    <JSwitch label="Disabled, off" disabled />
  </div>
</template>

API #

Props

Prop	Type	Default	Description
modelValue	`boolean`	`false`	Bound with `v-model`.
label	`string`	—	Label text.
description	`string`	—	Supporting text.
size	`'sm' \| 'md'`	`'md'`	Track size.
disabled	`boolean`	`false`	Disables the switch.
name	`string`	—	When set, submits `value` under this name while on.
value	`string`	`'on'`	Submitted value.

Events

Event	Payload	Description
update:modelValue	`boolean`	Emitted when toggled.

Slots

Slot	Props	Description
default	—	Custom label content.
description	—	Custom description content.

Accessibility #

A <button role="switch"> with aria-checked, labelled by its visible label.
Clicking the label toggles the switch.

Keyboard #

Key	Action
`Space`	Toggles the switch.
`Enter`	Toggles the switch.