CheckboxgroupCheckbox โ€‹

Used by CheckboxgroupElement to display checkboxes.

Options โ€‹

Find below the list of options that can use to configure CheckboxgroupCheckbox component. Options can be passed to the component via props.

item โ€‹

  • Type: object|string|number
  • Required: true
vue
<CheckboxgroupCheckbox item="Vue.js" ... />
<CheckboxgroupCheckbox :item="{ name: 'Vue.js', description: 'A Javascript framework' }" ... />

The checkbox option.

value โ€‹

  • Type: string|number
  • Required: true
vue
<CheckboxgroupCheckbox item="Vue.js" ... />
<CheckboxgroupCheckbox :item="{ name: 'Vue.js', description: 'A Javascript framework' }" ... />

The checkbox option value.

items โ€‹

  • Type: object|array
  • Required: true

index โ€‹

  • Type: number
  • Required: true

attrs โ€‹

  • Type: object
  • Default: {}
vue
<CheckboxgroupCheckboxElement :attrs="{ autofocus: true }" ... />

Assigns HTML attributes to the container / input field.

Properties โ€‹

All the data, computed and inject properties of the component.

checked โ€‹

  • Type: boolean
  • Group: computed

Whether the checkbox is checked.

id โ€‹

  • Type: boolean
  • Group: computed

The id attribute of the input.

name โ€‹

  • Type: boolean
  • Group: computed

The name attribute of the input.

isDisabled โ€‹

  • Type: boolean
  • Group: computed

Whether the checkbox should be disabled.

Size โ€‹

  • Type: string
  • Group: inject

The size of the component.

View โ€‹

  • Type: string
  • Group: computed

The name of the resolved view for the component. This one should be used to determine the component's view in class functions.

template โ€‹

  • Type: object
  • Group: computed

The component's template.

classes โ€‹

  • Type: object
  • Group: computed

The component's classes.

theme โ€‹

  • Type: object
  • Group: inject

The global theme object, which contains all the default templates and classes.

form$ โ€‹

  • Type: Vueform
  • Group: inject

The root form's component.

el$ โ€‹

  • Type: VueformElement
  • Group: inject

The parent element's component.

Views โ€‹

The CheckboxgroupCheckbox component is used by CheckboxgroupElement as a child component and inherits the view from it.

default โ€‹

vue
<CheckboxgroupElement
  name="checkboxgroup"
  :items="['Vue.js', 'React', 'AngularJS']"
/>

tabs โ€‹

vue
<CheckboxgroupElement
  name="checkboxgroup"
  :items="['Vue.js', 'React', 'AngularJS']"
  view="tabs"
/>

blocks โ€‹

vue
<CheckboxgroupElement
  name="checkboxgroup"
  :items="[
    { value: 'Vue.js', label: 'Vue.js', description: 'Vue.js framework' },
    { value: 'React', label: 'React', description: 'React framework' },
    { value: 'AngularJS', label: 'AngularJS', description: 'AngularJS framework' }
  ]"
  view="blocks"
/>
๐Ÿ‘‹ Hire Vueform team for form customizations and developmentLearn more