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 be 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'

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.
modelValue		boolean
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
size		"lg" | "md" | "xs" | "sm"
loading		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		PartialString<{ root: string; base: string; container: string; thumb: string; icon: string; wrapper: string; label: string; description: string; }>
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.
value		string The value given as data when submitted with a `name`.
required		boolean When `true`, indicates that the user must set the value before the owning form can be submitted.
id		string
defaultValue		boolean The state of the switch when it is initially rendered. Use when you do not need to control its state.

Slots

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

Emits

Event	Type