v2.1.8
/
Use our Nuxt starter

Checkbox

A toggle input for marking as checked or unchecked.
GitHub
Demo
Nuxt UI
CheckboxCheckbox

Usage

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

{
  "wait": "Loading client-side content..."
}

Use the default-value prop to set the initial value when you do not need to control its state.

{
  "wait": "Loading client-side content..."
}

Indeterminate

Use the indeterminate value in the v-model directive or default-value prop to set the Checkbox to an indeterminate state.

{
  "wait": "Loading client-side content..."
}

Label

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

{
  "wait": "Loading client-side content..."
}

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

{
  "wait": "Loading client-side content..."
}

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.

{
  "wait": "Loading client-side content..."
}

Color

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

{
  "wait": "Loading client-side content..."
}

Variant

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

{
  "wait": "Loading client-side content..."
}

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.

{
  "wait": "Loading client-side content..."
}

Indicator

Use the indicator prop to change the position or hide the indicator. Defaults to start.

{
  "wait": "Loading client-side content..."
}

Disabled

Use the disabled prop to disable the Checkbox.

Broadcast posting is allowed in Feed. These posts will be visible to everyone.

{
  "wait": "Loading client-side content..."
}

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

label string
description string
color'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"
variant'list' "card" | "list"
size'md' "md" | "xs" | "sm" | "lg"
indicator'start' "start" | "end" | "hidden"

Position of the indicator.

disabledboolean

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.

requiredboolean

When true, indicates that the user must set the value before the owning form can be submitted.

id string

Id of the element

defaultValueboolean | "indeterminate"

The value of the checkbox when it is initially rendered. Use when you do not need to control its value.

value"on" null | string | number | bigint | Record<string, any>

The value given as data when submitted with a name.

autofocus false | true | "true" | "false"
modelValueundefinedboolean | "indeterminate"
b24ui { root?: ClassNameValue; base?: ClassNameValue; indicator?: ClassNameValue; container?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }
This component also supports all native <button> HTML attributes.

Slots

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

Emits

Event Type
change[event: Event]
update:modelValue[value: boolean | "indeterminate"]

Theme

app.config.ts
export default defineAppConfig({
  b24ui: {
    checkbox: {
      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-[18px]',
            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'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import bitrix24UIPluginVite from '@bitrix24/b24ui-nuxt/vite'

export default defineConfig({
  plugins: [
    vue(),
    bitrix24UIPluginVite({
      b24ui: {
        checkbox: {
          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-[18px]',
                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'
          }
        }
      }
    })
  ]
})

Skeleton

A toggle control for switching between two states.

CheckboxGroup

Multi-select checklist using button controls.

Releases
 Published under MIT License.

Copyright © 2024-present Bitrix24