Components

Switch

A control that toggles between two states.

Usage

Use the v-model directive to control the checked state of the Switch.

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

<template>
  <USwitch v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <USwitch default-value />
</template>

Label

Use the label prop to set the label of the Switch.

label

Check me

<template>
  <USwitch label="Check me" />
</template>

When using the required prop, an asterisk is be added next to the label.

required

Check me

<template>
  <USwitch required label="Check me" />
</template>

Description

Use the description prop to set the description of the Switch.

description

Check me

This is a checkbox.

<template>
  <USwitch label="Check me" description="This is a checkbox." />
</template>

Icon

Use the checked-icon and unchecked-icon props to set the icons of the Switch when checked and unchecked.

uncheckedIcon

checkedIcon

Check me

<template>
  <USwitch
    unchecked-icon="i-heroicons-x-mark"
    checked-icon="i-heroicons-check"
    default-value
    label="Check me"
  />
</template>

Loading

Use the loading prop to show a loading icon on the Switch.

Check me

<template>
  <USwitch loading default-value label="Check me" />
</template>

Loading Icon

Use the loading-icon prop to customize the loading icon. Defaults to i-heroicons-arrow-path-20-solid.

loadingIcon

Check me

<template>
  <USwitch loading loading-icon="i-heroicons-arrow-path-rounded-square" default-value label="Check me" />
</template>

You can customize this icon globally in your app.config.ts under ui.icons.loading key.

Color

Use the color prop to change the color of the Switch.

color

Check me

<template>
  <USwitch color="gray" default-value label="Check me" />
</template>

Size

Use the size prop to change the size of the Switch.

size

Check me

<template>
  <USwitch size="xl" default-value label="Check me" />
</template>

Disabled

Use the disabled prop to disable the Switch.

disabled

Check me

<template>
  <USwitch disabled label="Check me" />
</template>

API

Props

Prop	Default	Type
`as`	`div`	`any` The element or component this component should render as.
`modelValue`		`boolean`
`color`	`primary`	`"error" \| "primary" \| "red" \| "orange" \| "amber" \| "yellow" \| "lime" \| "green" \| "emerald" \| "teal" \| "cyan" \| "sky" \| "blue" \| "indigo" \| "violet" \| "purple" \| "fuchsia" \| "pink" \| "rose" \| "gray"`
`size`	`md`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.ui.icons.loading`	`string` The icon when the `loading` prop is `true`.
`checkedIcon`		`string` Display an icon when the switch is checked.
`uncheckedIcon`		`string` Display an icon when the switch is unchecked.
`label`		`string`
`description`		`string`
`defaultValue`		`boolean` The state of the switch when it is initially rendered. Use when you do not need to control its state.
`disabled`		`boolean` When `true`, prevents the user from interacting with the switch.
`required`		`boolean` When `true`, indicates that the user must check the switch before the owning form can be submitted.
`name`		`string` The name of the switch. Submitted with its owning form as part of a name/value pair.
`value`		`string` The value given as data when submitted with a `name`.
`id`		`string`
`ui`		`PartialString<{ root: string; base: string[]; container: string; thumb: string; icon: string[]; wrapper: string; label: string; description: string; }>`

Slots

Slot	Type
`label`	`{ label?: string \| undefined; }`
`description`	`{ description?: string \| undefined; }`

Emits

Event	Type
`change`	`[payload: Event]`
`update:modelValue`	`[payload: boolean]`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    switch: {
      slots: {
        root: 'relative flex items-start',
        base: [
          'inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700',
          'transition-colors duration-200'
        ],
        container: 'flex items-center',
        thumb: 'group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
        icon: [
          'absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12',
          'transition-[color,opacity] duration-200'
        ],
        wrapper: 'ms-2',
        label: 'block font-medium text-gray-700 dark:text-gray-200',
        description: 'text-gray-500 dark:text-gray-400'
      },
      variants: {
        color: {
          primary: {
            base: 'data-[state=checked]:bg-primary-500 dark:data-[state=checked]:bg-primary-400 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
            icon: 'group-data-[state=checked]:text-primary-500 dark:group-data-[state=checked]:text-primary-400'
          },
          error: {
            base: 'data-[state=checked]:bg-error-500 dark:data-[state=checked]:bg-error-400 focus-visible:ring-error-500 dark:focus-visible:ring-error-400',
            icon: 'group-data-[state=checked]:text-error-500 dark:group-data-[state=checked]:text-error-400'
          },
          red: {
            base: 'data-[state=checked]:bg-red-500 dark:data-[state=checked]:bg-red-400 focus-visible:ring-red-500 dark:focus-visible:ring-red-400',
            icon: 'group-data-[state=checked]:text-red-500 dark:group-data-[state=checked]:text-red-400'
          },
          orange: {
            base: 'data-[state=checked]:bg-orange-500 dark:data-[state=checked]:bg-orange-400 focus-visible:ring-orange-500 dark:focus-visible:ring-orange-400',
            icon: 'group-data-[state=checked]:text-orange-500 dark:group-data-[state=checked]:text-orange-400'
          },
          amber: {
            base: 'data-[state=checked]:bg-amber-500 dark:data-[state=checked]:bg-amber-400 focus-visible:ring-amber-500 dark:focus-visible:ring-amber-400',
            icon: 'group-data-[state=checked]:text-amber-500 dark:group-data-[state=checked]:text-amber-400'
          },
          yellow: {
            base: 'data-[state=checked]:bg-yellow-500 dark:data-[state=checked]:bg-yellow-400 focus-visible:ring-yellow-500 dark:focus-visible:ring-yellow-400',
            icon: 'group-data-[state=checked]:text-yellow-500 dark:group-data-[state=checked]:text-yellow-400'
          },
          lime: {
            base: 'data-[state=checked]:bg-lime-500 dark:data-[state=checked]:bg-lime-400 focus-visible:ring-lime-500 dark:focus-visible:ring-lime-400',
            icon: 'group-data-[state=checked]:text-lime-500 dark:group-data-[state=checked]:text-lime-400'
          },
          green: {
            base: 'data-[state=checked]:bg-green-500 dark:data-[state=checked]:bg-green-400 focus-visible:ring-green-500 dark:focus-visible:ring-green-400',
            icon: 'group-data-[state=checked]:text-green-500 dark:group-data-[state=checked]:text-green-400'
          },
          emerald: {
            base: 'data-[state=checked]:bg-emerald-500 dark:data-[state=checked]:bg-emerald-400 focus-visible:ring-emerald-500 dark:focus-visible:ring-emerald-400',
            icon: 'group-data-[state=checked]:text-emerald-500 dark:group-data-[state=checked]:text-emerald-400'
          },
          teal: {
            base: 'data-[state=checked]:bg-teal-500 dark:data-[state=checked]:bg-teal-400 focus-visible:ring-teal-500 dark:focus-visible:ring-teal-400',
            icon: 'group-data-[state=checked]:text-teal-500 dark:group-data-[state=checked]:text-teal-400'
          },
          cyan: {
            base: 'data-[state=checked]:bg-cyan-500 dark:data-[state=checked]:bg-cyan-400 focus-visible:ring-cyan-500 dark:focus-visible:ring-cyan-400',
            icon: 'group-data-[state=checked]:text-cyan-500 dark:group-data-[state=checked]:text-cyan-400'
          },
          sky: {
            base: 'data-[state=checked]:bg-sky-500 dark:data-[state=checked]:bg-sky-400 focus-visible:ring-sky-500 dark:focus-visible:ring-sky-400',
            icon: 'group-data-[state=checked]:text-sky-500 dark:group-data-[state=checked]:text-sky-400'
          },
          blue: {
            base: 'data-[state=checked]:bg-blue-500 dark:data-[state=checked]:bg-blue-400 focus-visible:ring-blue-500 dark:focus-visible:ring-blue-400',
            icon: 'group-data-[state=checked]:text-blue-500 dark:group-data-[state=checked]:text-blue-400'
          },
          indigo: {
            base: 'data-[state=checked]:bg-indigo-500 dark:data-[state=checked]:bg-indigo-400 focus-visible:ring-indigo-500 dark:focus-visible:ring-indigo-400',
            icon: 'group-data-[state=checked]:text-indigo-500 dark:group-data-[state=checked]:text-indigo-400'
          },
          violet: {
            base: 'data-[state=checked]:bg-violet-500 dark:data-[state=checked]:bg-violet-400 focus-visible:ring-violet-500 dark:focus-visible:ring-violet-400',
            icon: 'group-data-[state=checked]:text-violet-500 dark:group-data-[state=checked]:text-violet-400'
          },
          purple: {
            base: 'data-[state=checked]:bg-purple-500 dark:data-[state=checked]:bg-purple-400 focus-visible:ring-purple-500 dark:focus-visible:ring-purple-400',
            icon: 'group-data-[state=checked]:text-purple-500 dark:group-data-[state=checked]:text-purple-400'
          },
          fuchsia: {
            base: 'data-[state=checked]:bg-fuchsia-500 dark:data-[state=checked]:bg-fuchsia-400 focus-visible:ring-fuchsia-500 dark:focus-visible:ring-fuchsia-400',
            icon: 'group-data-[state=checked]:text-fuchsia-500 dark:group-data-[state=checked]:text-fuchsia-400'
          },
          pink: {
            base: 'data-[state=checked]:bg-pink-500 dark:data-[state=checked]:bg-pink-400 focus-visible:ring-pink-500 dark:focus-visible:ring-pink-400',
            icon: 'group-data-[state=checked]:text-pink-500 dark:group-data-[state=checked]:text-pink-400'
          },
          rose: {
            base: 'data-[state=checked]:bg-rose-500 dark:data-[state=checked]:bg-rose-400 focus-visible:ring-rose-500 dark:focus-visible:ring-rose-400',
            icon: 'group-data-[state=checked]:text-rose-500 dark:group-data-[state=checked]:text-rose-400'
          },
          gray: {
            base: 'data-[state=checked]:bg-gray-900 dark:data-[state=checked]:bg-white focus-visible:ring-gray-900 dark:focus-visible:ring-white',
            icon: 'group-data-[state=checked]:text-gray-900 dark:group-data-[state=checked]:text-white'
          }
        },
        size: {
          xs: {
            base: 'w-7',
            container: 'h-4',
            thumb: 'size-3 data-[state=checked]:translate-x-3',
            wrapper: 'text-xs'
          },
          sm: {
            base: 'w-8',
            container: 'h-4',
            thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
            wrapper: 'text-xs'
          },
          md: {
            base: 'w-9',
            container: 'h-5',
            thumb: 'size-4 data-[state=checked]:translate-x-4',
            wrapper: 'text-sm'
          },
          lg: {
            base: 'w-10',
            container: 'h-5',
            thumb: 'size-4.5 data-[state=checked]:translate-x-4.5',
            wrapper: 'text-sm'
          },
          xl: {
            base: 'w-11',
            container: 'h-6',
            thumb: 'size-5 data-[state=checked]:translate-x-5',
            wrapper: 'text-base'
          }
        },
        checked: {
          true: {
            icon: 'group-data-[state=checked]:opacity-100'
          }
        },
        unchecked: {
          true: {
            icon: 'group-data-[state=unchecked]:opacity-100'
          }
        },
        loading: {
          true: {
            icon: 'animate-spin'
          }
        },
        required: {
          true: {
            label: "after:content-['*'] after:ms-0.5 after:text-error-500 dark:after:text-error-400"
          }
        },
        disabled: {
          true: {
            base: 'cursor-not-allowed opacity-75',
            label: 'cursor-not-allowed opacity-75',
            description: 'cursor-not-allowed opacity-75'
          }
        }
      },
      defaultVariants: {
        color: 'primary',
        size: 'md'
      }
    }
  }
})

Slider

An input to select a numeric value within a range.

Table

A responsive table element to display data in rows and columns.