Switch

A toggle control for switching between two states.

Switch

Nuxt UI

Git

Usage

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

Details

<script setup lang="ts">
import { ref } from 'vue'

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.

Details

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

Label

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

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

Details

<script setup lang="ts">
export interface ExampleProps {
  label?: string
  isRequired?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  label: 'All employees can post to Feed',
  isRequired: true
})
</script>

<template>
  <B24Switch
    :label="label"
    :required="isRequired"
  />
</template>

Description

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

Details

<script setup lang="ts">
export interface ExampleProps {
  description?: string
}

withDefaults(defineProps<ExampleProps>(), {
  description: 'Broadcast posting is allowed in Feed. These posts will be visible to everyone.'
})
</script>

<template>
  <B24Switch
    label="All employees can post to Feed"
    :description="description"
  />
</template>

Icon

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

Details

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

<template>
  <B24Switch
    :unchecked-icon="Cross30Icon"
    :checked-icon="CheckIcon"
    default-value
    label="Post administrator change notification to the General chat"
  />
</template>

Loading

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

Details

<script setup lang="ts">
export interface ExampleProps {
  isLoading?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isLoading: true
})
</script>

<template>
  <B24Switch
    :loading="isLoading"
    label="Enable rich link previews"
    default-value
  />
</template>

Loading Icon

Use the loading-icon prop to customize the loading icon @bitrix24/b24icons. Defaults to Refresh6Icon.

Details

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

export interface ExampleProps {
  isLoading?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isLoading: true
})
</script>

<template>
  <B24Switch
    :loading="isLoading"
    :loading-icon="SettingIcon"
    label="Enable rich link previews"
    default-value
    size="lg"
  />
</template>

Color

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

Details

<script setup lang="ts">
import type { SwitchProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  color?: SwitchProps['color']
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default'
})
</script>

<template>
  <B24Switch
    :color="color"
    label="Enable rich link previews"
    default-value
    size="lg"
  />
</template>

Size

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

Details

<script setup lang="ts">
export interface ExampleProps {
  size?: any
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md'
})
</script>

<template>
  <B24Switch
    :size="size"
    label="Enable rich link previews"
    default-value
  />
</template>

Disabled

Use the disabled prop to disable the Switch.

Details

<script setup lang="ts">
export interface ExampleProps {
  isDisabled?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})
</script>

<template>
  <B24Switch
    :disabled="isDisabled"
    label="Enable rich link previews"
    default-value
  />
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
color	'primary'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
size	'md'	"sm" | "xs" | "md" | "lg"
loading	false	boolean When `true`, the loading icon will be displayed
loadingIcon	icons.refresh	(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any The icon when the `loading` prop is `true`.
checkedIcon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon when the switch is checked.
uncheckedIcon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon when the switch is unchecked.
label		string
description		string
b24ui		{ root?: ClassNameValue; base?: ClassNameValue; container?: ClassNameValue; thumb?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }
disabled		boolean When `true`, prevents the user from interacting with the switch.
name		string The name of the field. Submitted with its owning form as part of a name/value pair.
defaultValue		boolean The state of the switch when it is initially rendered. Use when you do not need to control its state.
required		boolean When `true`, indicates that the user must set the value before the owning form can be submitted.
id		string
value		string The value given as data when submitted with a `name`.
modelValue	undefined	boolean

Slots

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

Emits

Event	Type