BreezeUI
  • English

    • Switch

    A control that allows the user to toggle between checked and not checked.

    Component Features

    • 🔄 Toggle Control: Allows switching between checked and unchecked states.
    • 📏 Multiple Sizes: Supports sm, md, lg size specs.
    • ⏳ Loading State: Supports loading prop to display loading animation.
    • ❌ Disabled State: Supports disabled prop.
    • 📝 Status Text: Supports custom status text via checked-text and unchecked-text props.
    • 🎨 Custom Thumb: Supports custom thumb content via thumb slot.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    <script setup lang="ts">
import { ref } from 'vue'
import { BrSwitch } from '@breezeui/vue'

const checked = ref(false)
</script>

<template>
  <div class="flex items-center space-x-2">
    <BrSwitch id="airplane-mode" v-model:checked="checked" />
    <label for="airplane-mode" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      Airplane Mode
    </label>
  </div>
</template>

    Disabled State

    Set the disabled prop to disable the switch.

    <script setup lang="ts">
import { BrSwitch } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-center space-x-2">
    <BrSwitch disabled />
    <BrSwitch disabled checked />
  </div>
</template>

    Loading State

    Set the loading prop to show a loading state. The switch is disabled while loading.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrSwitch } from '@breezeui/vue'

const checked = ref(true)
</script>

<template>
  <div class="flex items-center space-x-2">
    <BrSwitch v-model:checked="checked" :loading="true" />
  </div>
</template>

    With Label

    Use BrLabel to associate a label with the switch.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrSwitch, BrLabel } from '@breezeui/vue'

const checked = ref(false)
</script>

<template>
  <div class="flex items-center space-x-2">
    <BrSwitch id="notifications" v-model:checked="checked" />
    <BrLabel html-for="notifications">Enable Notifications</BrLabel>
  </div>
</template>

    Sizes

    Use the size prop to control the size of the switch.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrSwitch } from '@breezeui/vue'

const checked = ref(true)
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="xs" />
      <span class="text-sm">xs</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="sm" />
      <span class="text-sm">sm</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="md" />
      <span class="text-sm">md (default)</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="lg" />
      <span class="text-sm">lg</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="xl" />
      <span class="text-sm">xl</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="2xl" />
      <span class="text-sm">2xl</span>
    </div>
  </div>
</template>

    Custom Thumb Content

    You can customize the content inside the switch thumb using the thumb slot, such as adding icons or text.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrSwitch } from '@breezeui/vue'
import { Check, X } from 'lucide-vue-next'

const checked1 = ref(false)
const checked2 = ref(true)
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center space-x-2">
      <BrSwitch id="icon-switch" v-model:checked="checked1">
        <template #thumb>
          <Check v-if="checked1" class="w-3 h-3 text-primary" />
          <X v-else class="w-3 h-3 text-muted-foreground" />
        </template>
      </BrSwitch>
      <label for="icon-switch" class="text-sm font-medium leading-none">
        Use icons as thumb content
      </label>
    </div>

    <div class="flex items-center space-x-2">
      <BrSwitch id="text-switch" v-model:checked="checked2">
        <template #thumb>
          <span class="text-[10px] font-bold">{{ checked2 ? 'ON' : 'OFF' }}</span>
        </template>
      </BrSwitch>
      <label for="text-switch" class="text-sm font-medium leading-none">
        Use text as thumb content
      </label>
    </div>
  </div>
</template>

    Theming

    Global Customization (BrConfigProvider)

    You can override default CSS variables via the theme prop of BrConfigProvider.

    <script setup lang="ts">
import { ref } from 'vue'
import { BrSwitch, BrConfigProvider } from '@breezeui/vue'

const checked1 = ref(true)
const checked2 = ref(true)

const customTheme = {
  primary: '#10b981', // emerald-500
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <!-- Global Theme Config -->
    <div class="space-y-2">
      <h4 class="text-sm font-medium">ConfigProvider Theme</h4>
      <BrConfigProvider :theme="customTheme">
        <div class="flex items-center space-x-2">
          <BrSwitch v-model:checked="checked1" />
          <span class="text-sm text-muted-foreground">Emerald Primary</span>
        </div>
      </BrConfigProvider>
    </div>

    <!-- Local Style Override -->
    <div class="space-y-2">
      <h4 class="text-sm font-medium">Tailwind Class Override</h4>
      <div class="flex items-center space-x-2">
        <BrSwitch 
          v-model:checked="checked2"
          class="data-[state=checked]:bg-blue-600" 
        />
        <span class="text-sm text-muted-foreground">Blue Override</span>
      </div>
    </div>
  </div>
</template>

    Local Customization (TailwindCSS)

    You can directly override styles using TailwindCSS utility classes.

    <template>
  <BrSwitch class="data-[state=checked]:bg-indigo-500" />
</template>

    API

    Props

    NameTypeDefaultDescription
    modelValuebooleanfalseThe checked state of the switch
    defaultCheckedbooleanfalseThe default checked state when using uncontrolled mode
    disabledbooleanfalseWhether the switch is disabled
    loadingbooleanfalseWhether to show loading state
    size'sm' | 'md' | 'lg''md'The size of the switch
    namestring-The name of the switch
    idstring-The id of the switch
    requiredbooleanfalseWhether the switch is required
    valuestring'on'The value of the switch
    checkedTextstring-Text to display when checked
    uncheckedTextstring-Text to display when unchecked
    errorbooleanfalseWhether the switch has validation error

    Emits

    NameDescriptionParameters
    update:modelValueEvent emitted when the checked state changes(value: boolean)
    update:checkedEvent emitted when the checked state changes (Radix compatibility)(value: boolean)

    Slots

    NameDescription
    thumbCustom content for the switch thumb