Switch

vue

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

const checked = ref(true)
</script>

<template>
  <div class="flex">
    <Switch v-model="checked" />
  </div>
</template>

API Reference

Prop	Default	Type
color	–	Color
highContrast	–	boolean
radius	–	"none""small""medium""large""full"
size	–	"1""2""3"
variant	–	"soft""surface"

Examples

Size

vue

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

const checked = ref(true)
</script>

<template>
  <div class="flex items-center gap-2">
    <Switch v-model="checked" size="1" />
    <Switch v-model="checked" size="2" />
    <Switch v-model="checked" size="3" />
  </div>
</template>

Variant

Use the variant prop to control the visual style of the switch.

vue

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

<template>
  <div class="flex flex-col gap-3">
    <div class="flex items-center gap-2">
      <Switch variant="soft" />
      <Switch variant="soft" :default-value="true" />
      <Switch variant="soft" disabled />
      <Switch variant="soft" :default-value="true" disabled />
    </div>
    <div class="flex items-center gap-2">
      <Switch variant="surface" />
      <Switch variant="surface" :default-value="true" />
      <Switch variant="surface" disabled />
      <Switch variant="surface" :default-value="true" disabled />
    </div>
  </div>
</template>

Color

Use the color prop to assign a specific color.

vue

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

const checked = ref(true)
</script>

<template>
  <div class="flex items-center gap-2">
    <Switch v-model="checked" color="indigo" />
    <Switch v-model="checked" color="cyan" />
    <Switch v-model="checked" color="orange" />
    <Switch v-model="checked" color="crimson" />
    <Switch v-model="checked" color="gray" />
  </div>
</template>

Use the highContrast prop to increase color contrast in light mode.

vue

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

const checked = ref(true)
</script>

<template>
  <div class="flex items-center gap-2">
    <Switch v-model="checked" color="indigo" high-contrast />
    <Switch v-model="checked" color="cyan" high-contrast />
    <Switch v-model="checked" color="orange" high-contrast />
    <Switch v-model="checked" color="crimson" high-contrast />
    <Switch v-model="checked" color="gray" high-contrast />
  </div>
</template>

Radius

Change the radius style of the switch via radius prop.

vue

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

const checked = ref(true)
</script>

<template>
  <div class="flex items-center gap-2">
    <Switch v-model="checked" radius="none" />
    <Switch v-model="checked" radius="small" />
    <Switch v-model="checked" radius="full" />
  </div>
</template>

API Reference ​

Examples ​

Size ​

Variant ​