Usage
Use the v-model directive to control the checked state of the Checkbox.
<script setup lang="ts">
const value = ref(true)
</script>
<template>
<B24Checkbox v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>
<template>
<B24Checkbox v-model="value" />
</template>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<B24Checkbox default-value />
</template>
Indeterminate
Use the indeterminate value in the v-model directive or default-value prop to set the Checkbox to an indeterminate state.
<template>
<B24Checkbox default-value="indeterminate" />
</template>
Label
Use the label prop to set the label of the Checkbox.
All employees can post to Feed
<template>
<B24Checkbox label="All employees can post to Feed" />
</template>
When using the required prop, an asterisk is added next to the label.
All employees can post to Feed
<template>
<B24Checkbox required label="All employees can post to Feed" />
</template>
Description
Use the description prop to set the description of the Checkbox.
All employees can post to Feed
Broadcast posting is allowed in Feed. These posts will be visible to everyone.
<template>
<B24Checkbox
label="All employees can post to Feed"
description="Broadcast posting is allowed in Feed. These posts will be visible to everyone."
/>
</template>
Color
Use the color prop to change the color of the Checkbox.
Enable rich link previews
<template>
<B24Checkbox color="air-primary-copilot" default-value label="Enable rich link previews" />
</template>
Variant
Use the variant prop to change the variant of the Checkbox.
<template>
<B24Checkbox
variant="card"
color="air-primary-copilot"
default-value
label="All employees can post to Feed"
description="Broadcast posting is allowed in Feed. These posts will be visible to everyone."
/>
</template>
Size
Use the size prop to change the size of the Checkbox.
Broadcast posting is allowed in Feed. These posts will be visible to everyone.
<template>
<B24Checkbox
size="lg"
variant="list"
default-value
label="All employees can post to Feed"
description="Broadcast posting is allowed in Feed. These posts will be visible to everyone."
/>
</template>
Indicator
Use the indicator prop to change the position or hide the indicator. Defaults to start.
<template>
<B24Checkbox indicator="end" variant="card" default-value label="All employees can post to Feed" />
</template>
Disabled
Use the disabled prop to disable the Checkbox.
Broadcast posting is allowed in Feed. These posts will be visible to everyone.
<template>
<B24Checkbox disabled label="All employees can post to Feed" description="Broadcast posting is allowed in Feed. These posts will be visible to everyone." variant="list" />
</template>
API
Props
Slots
Emits
Theme
https://github.com/bitrix24/b24ui/tree/main/src/theme/checkbox.ts
export default {
slots: {
root: 'relative flex items-start',
base: 'cursor-pointer flex items-center justify-center shrink-0 rounded-(--ui-border-radius-2xs) text-label ring ring-inset ring-(--ui-color-base-5) focus-visible:outline-(--b24ui-border-color) outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2',
indicator: 'rounded-(--ui-border-radius-2xs) flex items-center justify-center size-full text-(--b24ui-color) ring-1 ring-(--b24ui-background) bg-(--b24ui-background)',
container: 'flex items-center',
icon: 'shrink-0 size-full',
wrapper: 'w-full font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular)',
label: 'cursor-pointer block text-label',
description: 'mt-[4px] text-description'
},
variants: {
color: {
'air-primary': {
root: 'style-filled'
},
'air-primary-success': {
root: 'style-filled-success'
},
'air-primary-alert': {
root: 'style-filled-alert'
},
'air-primary-copilot': {
root: 'style-filled-copilot'
},
'air-primary-warning': {
root: 'style-filled-warning'
},
default: {
root: 'style-old-default'
},
danger: {
root: 'style-old-danger'
},
success: {
root: 'style-old-success'
},
warning: {
root: 'style-old-warning'
},
primary: {
root: 'style-old-primary'
},
secondary: {
root: 'style-old-secondary'
},
collab: {
root: 'style-old-collab'
},
ai: {
root: 'style-old-ai'
}
},
variant: {
list: {
root: ''
},
card: {
root: 'border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg)'
}
},
indicator: {
start: {
root: 'flex-row',
wrapper: 'ms-2'
},
end: {
root: 'flex-row-reverse',
wrapper: 'me-2'
},
hidden: {
base: 'sr-only',
wrapper: 'text-center'
}
},
size: {
xs: {
base: 'size-3',
container: 'h-3',
wrapper: 'text-(length:--ui-font-size-xs) leading-[11px]',
label: ''
},
sm: {
base: 'size-3.5',
container: 'h-3.5',
wrapper: 'text-(length:--ui-font-size-sm) leading-3.5',
label: ''
},
md: {
base: 'size-4',
container: 'h-4',
wrapper: 'text-(length:--ui-font-size-lg) leading-4',
label: ''
},
lg: {
base: 'size-5',
container: 'h-5',
wrapper: 'text-(length:--ui-font-size-xl) leading-4.5',
label: ''
}
},
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'
}
},
checked: {
true: ''
}
},
compoundVariants: [
{
size: 'xs',
variant: 'card',
class: {
root: 'px-[13px] py-[7px] rounded-(--ui-border-radius-xs)'
}
},
{
size: 'sm',
variant: 'card',
class: {
root: 'px-[13px] py-[9px] rounded-(--ui-border-radius-sm)'
}
},
{
size: 'md',
variant: 'card',
class: {
root: 'px-[17px] py-[10px] rounded-(--ui-border-radius-md)'
}
},
{
size: 'lg',
variant: 'card',
class: {
root: 'px-[23px] py-3 rounded-(--ui-border-radius-md)'
}
},
{
variant: 'card',
checked: true,
class: {
root: 'border-(--b24ui-border-color) cursor-pointer'
}
},
{
variant: 'card',
disabled: true,
class: {
root: 'cursor-not-allowed'
}
}
],
defaultVariants: {
color: 'air-primary',
size: 'md',
variant: 'list',
indicator: 'start'
}
}