v2.1.16
/
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.

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

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

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

<template>
  <B24Switch default-value />
</template>

Label

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

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

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

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

Description

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

This is a checkbox.

<template>
  <B24Switch 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.

<script setup lang="ts">
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Switch :checked-icon="RocketIcon" default-value label="Check me" />
</template>

Loading

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

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

Color

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

<template>
  <B24Switch color="air-primary-copilot" default-value label="Check me" />
</template>

Size

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

<template>
  <B24Switch size="lg" default-value label="Check me" />
</template>

Disabled

Use the disabled prop to disable the Switch.

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

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