Checkbox

A toggle input for marking as checked or unchecked.

Checkbox

Nuxt UI

Git

Usage

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

Details

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

Details

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

Details

<template>
  <B24Checkbox default-value="indeterminate" />
</template>

Label

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

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>
  <B24Checkbox
    :label="label"
    :required="isRequired"
  />
</template>

Description

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

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>
  <B24Checkbox
    label="All employees can post to Feed"
    :description="description"
  />
</template>

Color

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

Details

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

export interface ExampleProps {
  color: CheckboxProps['color']
}

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

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

Size

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

Details

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

export interface ExampleProps {
  size?: CheckboxProps['size']
}

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

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

Disabled

Use the disabled prop to disable the Checkbox.

Details

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

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

<template>
  <B24Checkbox
    :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 | "indeterminate"
label		string
description		string
color		"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
size		"lg" | "md" | "xs" | "sm"
b24ui		Partial<{ root: string; base: string; container: string; wrapper: string; icon: string; label: string; description: string; }>
disabled		boolean When `true`, prevents the user from interacting with the checkbox
name		string The name of the field. Submitted with its owning form as part of a name/value pair.
value	"on"	null | string | number | Record<string, any> 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 Id of the element
defaultValue		boolean | "indeterminate" The value of the checkbox when it is initially rendered. Use when you do not need to control its value.

Slots

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

Emits

Event	Type