Switch

Stable

Allow users to toggle between two states: on and off.

<script setup lang="ts">
import { ref } from 'vue'
import { HSwitch } from '@holistics/design-system'

const isOn = ref(false)
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HSwitch v-model="isOn" />

    <HSwitch
      v-model="isOn"
      disabled
    />
  </div>
</template>

Examples

Sizes

<script setup lang="ts">
import { ref } from 'vue'
import { HSwitch, SWITCH_SIZES } from '@holistics/design-system'

const isOn = ref(false)
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HSwitch
      v-for="size in SWITCH_SIZES"
      :key="size"
      v-model="isOn"
      :size="size"
    />
  </div>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
modelValue	boolean
size	"sm" | "md" | "lg" = "md"
label	string
name	string
value	any
disabled	boolean
required	boolean

Events

Name	Parameters	Description
@update:modelValue	[checked: boolean]

Slots

Name	Scoped	Description
#default	any