Switch

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

Prop	Default	Type	Description
`modelValue`	-	`boolean`	The controlled state of the switch. Can be bind as `v-model`.
`defaultValue`	-	`boolean`	The uncontrolled state of the switch.
`value`	`on`	`string`	The value of the switch.
`disabled`	`false`	`boolean`	When `true`, prevents the user from interacting with the switch.

Preview

Code

Form Group

You can use the switch component inside the form-group component, or you can use it with the label component.

Notice that when you click on the label, the switch gets toggled.

Preview

Code

Toggled off

Color

Prop	Default	Type	Description
`switch-checked`	`primary`	`string`	Change the color of the switch when checked.
`switch-unchecked`	`gray`	`string`	Change the color of the switch when unchecked.

Preview

Code

Size

Adjust the switch size without limits. Use breakpoints (e.g., sm:sm, xs:lg) for responsive sizes or states (e.g., hover:lg, focus:3xl) for state-based sizes.

Prop	Default	Type	Description
`size`	`md`	`string`	Change the size of the switch.

Preview

Code

Icon

Configure the switch icon using the following props.

Prop	Default	Type	Description
`icon`	-	`string`	Add an icon that appears regardless of state.
`checkedIcon`	-	`string`	Add an icon that appears when the switch is on.
`uncheckedIcon`	-	`string`	Add an icon that appears when the switch is off.

Preview

Code

Loading

Set the switch to loading state.

Prop	Default	Type	Description
`loading`	-	`boolean`	Set the switch to loading.

Preview

Code

Customization

Configure the progress using the una prop and utility classes.

Preview

Code

Slots

Name	Props	Description
`icon`	`checked`	Customizable icons for the switch in both checked and unchecked states.
`loading-icon`	`checked`	The loading icon slot.

Presets

shortcuts/switch.ts

type SwitchPrefix = 'switch'

export const staticSwitch: Record<`${SwitchPrefix}-${string}` | SwitchPrefix, string> = {
  // base
  'switch': 'h-1.25em w-2.25em switch-disabled inline-flex shrink-0 cursor-pointer items-center border-2 border-transparent rounded-full shadow-sm transition-colors',
  'switch-disabled': 'data-[disabled]:n-disabled',

  // thumb
  'switch-thumb': 'square-1em flex items-center justify-center pointer-events-none block rounded-full bg-base shadow-lg ring-0 transition-transform',
  'switch-thumb-checked': 'translate-x-1.01em',
  'switch-thumb-unchecked': 'translate-x-0.03em',

  // icons
  'switch-icon': 'text-0.7em',
  'switch-icon-unchecked': 'text-muted',
  'switch-icon-checked': 'text-muted',

  // loading
  'switch-loading-icon': 'text-gray animate-spin text-0.8em',
  'switch-loading-icon-name': 'i-loading',

  'switch-focus-gray': 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-base focus-visible:ring-offset-2 focus-visible:ring-offset-background',
}

export const dynamicSwitch = [
  // base
  [/^switch-focus(-(\S+))?$/, ([, , c = 'primary']) => `focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-${c}-600 dark:focus-visible:ring-${c}-500 focus-visible:ring-offset-2 focus-visible:ring-offset-background`],

  // variants
  [/^switch-checked(-(\S+))?$/, ([, , c = 'primary']) => `data-[state=checked]:switch-focus-${c} data-[state=checked]:bg-${c}-600 dark:data-[state=checked]:bg-${c}-500`],
  [/^switch-unchecked(-(\S+))?$/, ([, , c = 'gray']) => `data-[state=unchecked]:switch-focus-${c} data-[state=unchecked]:bg-${c}-200 dark:data-[state=unchecked]:bg-${c}-700/58`],
]

export const _switch = [
  ...dynamicSwitch,
  staticSwitch,
]

Props

types/switch.ts

import type { SwitchRootProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'

interface BaseExtensions {
  class?: HTMLAttributes['class']
  /**
   * Allows you to change the size of the input.
   *
   * @default md
   *
   * @example
   * size="sm" | size="2cm" | size="2rem" | size="2px"
   */
  size?: HTMLAttributes['class']
}

export interface NSwitchProps extends SwitchRootProps, BaseExtensions {
  /**
   * Add a loading indicator to the switch.
   * This will also disable the switch.
   *
   * @default false
   */
  loading?: boolean
  /**
   * Allows you to display an icon. Equivalent of setting both `onIcon` and `offIcon`.
   *
   * @example
   * icon="i-heroicons-question-20-solid"
   */
  icon?: HTMLAttributes['class']
  /**
   * Allows you to display an icon when the switch is on.
   * Accepts icon name and utility classes
   *
   * @example
   * on-icon="i-heroicons-check-20-solid text-white"
   */
  checkedIcon?: HTMLAttributes['class']
  /**
   * Allows you to display an icon when the switch is off.
   * Accepts icon name and utility classes
   *
   * @example
   * off-icon="i-heroicons-x-mark-20-solid text-white"
   */
  uncheckedIcon?: HTMLAttributes['class']
  /**
   * Allows you to add `UnaUI` switch preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @example
   * switch-checked="green"
   */
  switchChecked?: HTMLAttributes['class']
  /**
   * Allows you to add `UnaUI` switch preset properties,
   * Think of it as a shortcut for adding options or variants to the preset if available.
   *
   * @example
   * switch-unchecked="gray"
   */
  switchUnchecked?: HTMLAttributes['class']
  /**
   * `UnaUI` preset configuration
   *
   * @see https://github.com/una-ui/una-ui/blob/main/packages/preset/src/_shortcuts/switch.ts
   */
  una?: {
    switch?: HTMLAttributes['class']
    switchCheckedBase?: HTMLAttributes['class']
    switchUncheckedBase?: HTMLAttributes['class']

    switchThumb?: HTMLAttributes['class']
    switchThumbChecked?: HTMLAttributes['class']
    switchThumbUnchecked?: HTMLAttributes['class']

    switchIcon?: HTMLAttributes['class']
    switchIconChecked?: HTMLAttributes['class']
    switchIconUnchecked?: HTMLAttributes['class']

    switchLoading?: HTMLAttributes['class']
    switchLoadingIconName?: HTMLAttributes['class']
  }
}

Components

Switch.vue

<script setup lang="ts">
import type { SwitchRootEmits } from 'reka-ui'
import type { NSwitchProps } from '../../types'
import { reactivePick } from '@vueuse/core'
import {
  SwitchRoot,
  SwitchThumb,
  useForwardPropsEmits,
} from 'reka-ui'
import { cn } from '../../utils'
import NIcon from '../elements/Icon.vue'

const props = withDefaults(defineProps<NSwitchProps>(), {
  size: 'md',
  switchChecked: 'primary',
  switchUnchecked: 'gray',
})

const emit = defineEmits<SwitchRootEmits>()

const rootPropsEmits = useForwardPropsEmits(reactivePick(props, 'as', 'asChild', 'modelValue', 'defaultValue', 'disabled', 'id', 'name', 'required', 'value'), emit)
</script>

<template>
  <SwitchRoot
    v-slot="{ modelValue }"
    v-bind="rootPropsEmits"
    :class="cn(
      'peer switch',
      una?.switch,
      modelValue
        ? una?.switchCheckedBase
        : una?.switchUncheckedBase,
    )"
    :disabled="disabled || loading"
    :switch-checked
    :switch-unchecked
    :size
  >
    <SwitchThumb
      :class="cn(
        'peer switch-thumb',
        una?.switchThumb,
        modelValue
          ? 'switch-thumb-checked'
          : 'switch-thumb-unchecked',
        modelValue
          ? una?.switchThumbChecked
          : una?.switchThumbUnchecked,
      )"
    >
      <slot v-if="!loading" name="icon" :model-value>
        <NIcon
          :name="(modelValue ? checkedIcon : uncheckedIcon) || icon"
          :class="cn(
            'switch-icon',
            una?.switchIcon,
            modelValue
              ? ['switch-icon-checked', una?.switchIconChecked]
              : ['switch-icon-unchecked', una?.switchIconUnchecked],
          )"
        />
      </slot>
      <slot v-else name="loading-icon" :model-value>
        <NIcon
          :class="cn(
            'switch-icon switch-loading-icon',
            una?.switchLoading,
          )"
          :name="una?.switchLoadingIconName || 'switch-loading-icon-name'"
        />
      </slot>
    </SwitchThumb>
  </SwitchRoot>
</template>