v2.1.8
/
Use our Nuxt starter

Switch

A toggle control for switching between two states.
GitHub
Demo
Nuxt UI
SwitchSwitch

Usage

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

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

Label

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

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

Description

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

This is a checkbox.

{
  "wait": "Loading client-side content..."
}

Icon

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

{
  "wait": "Loading client-side content..."
}

Loading

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

{
  "wait": "Loading client-side content..."
}

Color

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

{
  "wait": "Loading client-side content..."
}

Size

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

{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the Switch.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

color'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"
size'md' "xs" | "sm" | "md" | "lg"
loadingfalseboolean

When true, the loading icon will be displayed

loadingIconicons.refreshIconComponent

The icon when the loading prop is true.

checkedIconIconComponent

Display an icon when the switch is checked.

uncheckedIconIconComponent

Display an icon when the switch is unchecked.

label string
description string
defaultValueboolean

The state of the switch when it is initially rendered. Use when you do not need to control its state.

disabledboolean

When true, prevents the user from interacting with the switch.

id string
name string

The name of the field. Submitted with its owning form as part of a name/value pair.

requiredboolean

When true, indicates that the user must set the value before the owning form can be submitted.

value string

The value given as data when submitted with a name.

autofocus false | true | "true" | "false"
modelValueundefinedboolean
b24ui { root?: ClassNameValue; base?: ClassNameValue; container?: ClassNameValue; thumb?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }
This component also supports all native <button> HTML attributes.

Slots

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

Emits

Event Type
update:modelValue[value: boolean]
change[event: Event]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    switch: {
      slots: {
        root: 'relative flex items-start',
        base: 'cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color)',
        container: 'flex items-center',
        thumb: 'group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0',
        icon: 'absolute shrink-0 group-data-[state=unchecked]:text-(--ui-color-base-5) edge-dark:group-data-[state=unchecked]:text-(--ui-color-gray-60) opacity-0 p-0.5 size-full transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--b24ui-background)',
        wrapper: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2',
        label: 'cursor-pointer block text-(--b24ui-typography-label-color)',
        description: 'text-(--b24ui-typography-description-color)'
      },
      variants: {
        color: {
          'air-primary': {
            base: 'style-filled'
          },
          'air-primary-success': {
            base: 'style-filled-success'
          },
          'air-primary-alert': {
            base: 'style-filled-alert'
          },
          'air-primary-copilot': {
            base: 'style-filled-copilot'
          },
          'air-primary-warning': {
            base: 'style-filled-warning'
          },
          default: {
            base: 'style-old-default'
          },
          danger: {
            base: 'style-old-danger'
          },
          success: {
            base: 'style-old-success'
          },
          warning: {
            base: 'style-old-warning'
          },
          primary: {
            base: 'style-old-primary'
          },
          secondary: {
            base: 'style-old-secondary'
          },
          collab: {
            base: 'style-old-collab'
          },
          ai: {
            base: 'style-old-ai'
          }
        },
        size: {
          xs: {
            base: 'w-[28px]',
            container: 'h-[16px]',
            thumb: 'size-[12px] data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
            wrapper: 'text-(length:--ui-font-size-xs)',
            label: 'leading-[16px]'
          },
          sm: {
            base: 'w-[32px]',
            container: 'h-[16px]',
            thumb: 'size-[14px] data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
            wrapper: 'text-(length:--ui-font-size-sm)',
            label: 'leading-[16px]'
          },
          md: {
            base: 'w-[36px]',
            container: 'h-[20px]',
            thumb: 'size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
            wrapper: 'text-(length:--ui-font-size-md)',
            label: 'leading-[20px]'
          },
          lg: {
            base: 'w-[40px]',
            container: 'h-[20px]',
            thumb: 'size-[20px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
            wrapper: 'text-(length:--ui-font-size-xl)',
            label: 'leading-[20px]'
          }
        },
        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-(--ui-color-accent-main-alert)"
          }
        },
        disabled: {
          true: {
            root: 'opacity-30',
            base: 'cursor-not-allowed',
            label: 'cursor-not-allowed',
            description: 'cursor-not-allowed'
          }
        }
      },
      defaultVariants: {
        color: 'air-primary',
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        switch: {
          slots: {
            root: 'relative flex items-start',
            base: 'cursor-pointer inline-flex items-center shrink-0 rounded-(--ui-border-radius-pill) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 transition-[background] duration-200 border-2 border-(--ui-color-background-transparent) data-[state=unchecked]:bg-(--ui-color-base-5) data-[state=checked]:bg-(--b24ui-background) focus-visible:outline-(--b24ui-border-color)',
            container: 'flex items-center',
            thumb: 'group pointer-events-none flex items-center justify-center rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:-translate-x-0',
            icon: 'absolute shrink-0 group-data-[state=unchecked]:text-(--ui-color-base-5) edge-dark:group-data-[state=unchecked]:text-(--ui-color-gray-60) opacity-0 p-0.5 size-full transition-[color,opacity] duration-200 group-data-[state=checked]:text-(--b24ui-background)',
            wrapper: 'font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) ms-2',
            label: 'cursor-pointer block text-(--b24ui-typography-label-color)',
            description: 'text-(--b24ui-typography-description-color)'
          },
          variants: {
            color: {
              'air-primary': {
                base: 'style-filled'
              },
              'air-primary-success': {
                base: 'style-filled-success'
              },
              'air-primary-alert': {
                base: 'style-filled-alert'
              },
              'air-primary-copilot': {
                base: 'style-filled-copilot'
              },
              'air-primary-warning': {
                base: 'style-filled-warning'
              },
              default: {
                base: 'style-old-default'
              },
              danger: {
                base: 'style-old-danger'
              },
              success: {
                base: 'style-old-success'
              },
              warning: {
                base: 'style-old-warning'
              },
              primary: {
                base: 'style-old-primary'
              },
              secondary: {
                base: 'style-old-secondary'
              },
              collab: {
                base: 'style-old-collab'
              },
              ai: {
                base: 'style-old-ai'
              }
            },
            size: {
              xs: {
                base: 'w-[28px]',
                container: 'h-[16px]',
                thumb: 'size-[12px] data-[state=checked]:translate-x-3 data-[state=checked]:rtl:-translate-x-3',
                wrapper: 'text-(length:--ui-font-size-xs)',
                label: 'leading-[16px]'
              },
              sm: {
                base: 'w-[32px]',
                container: 'h-[16px]',
                thumb: 'size-[14px] data-[state=checked]:translate-x-3.5 data-[state=checked]:rtl:-translate-x-3.5',
                wrapper: 'text-(length:--ui-font-size-sm)',
                label: 'leading-[16px]'
              },
              md: {
                base: 'w-[36px]',
                container: 'h-[20px]',
                thumb: 'size-[16px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
                wrapper: 'text-(length:--ui-font-size-md)',
                label: 'leading-[20px]'
              },
              lg: {
                base: 'w-[40px]',
                container: 'h-[20px]',
                thumb: 'size-[20px] data-[state=checked]:translate-x-4 data-[state=checked]:rtl:-translate-x-4',
                wrapper: 'text-(length:--ui-font-size-xl)',
                label: 'leading-[20px]'
              }
            },
            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-(--ui-color-accent-main-alert)"
              }
            },
            disabled: {
              true: {
                root: 'opacity-30',
                base: 'cursor-not-allowed',
                label: 'cursor-not-allowed',
                description: 'cursor-not-allowed'
              }
            }
          },
          defaultVariants: {
            color: 'air-primary',
            size: 'md'
          }
        }
      }
    })
  ]
})

SelectMenu

A refined and searchable selection component.

Textarea

A textarea for entering multi-line text.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24