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.
<template>
<B24Checkbox label="All employees can post to Feed" />
</template>
When using the required prop, an asterisk is added next to the label.
<template>
<B24Checkbox required label="All employees can post to Feed" />
</template>
Description
Use the description prop to set the description of the Checkbox.
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.
<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-(--b24ui-typography-label-color) 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-(--b24ui-typography-label-color)',
description: 'mt-[4px] text-(--b24ui-typography-description-color)'
},
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-[12px]',
container: 'h-[12px]',
wrapper: 'text-(length:--ui-font-size-xs) leading-[11px]',
label: ''
},
sm: {
base: 'size-[14px]',
container: 'h-[14px]',
wrapper: 'text-(length:--ui-font-size-sm) leading-[14px]',
label: ''
},
md: {
base: 'size-[16px]',
container: 'h-[16px]',
wrapper: 'text-(length:--ui-font-size-lg) leading-[16px]',
label: ''
},
lg: {
base: 'size-[20px]',
container: 'h-[20px]',
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-[12px] 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'
}
}