@mekari/mekari-ui-vue/src/components/FormCheckbox/stories/config/form-checkbox-group.js

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

export default {
  // Props
  ariaInvalid: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean | String',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'Sets the `aria-invalid` attribute with the specified value',
  },
  autofocus: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'When set to `true`, attempts to auto-focus the control when it is mounted, or re-activated when in a keep-alive. Does not set the `autofocus` attribute on the control',
  },
  checked: {
    control: {
      type: 'array',
    },
    table: {
      type: {
        summary: 'Array',
      },
    },
    description: 'The current value of the checked checkboxes in the group. Must be an array when there are multiple checkboxes',
  },
  disabled: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'When set to `true`, disables the component\'s functionality and places it in a disabled state',
  },
  'disabled-field': {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
      defaultValue: {
        summary: 'disabled',
      },
    },
    description: 'Field name in the `options` array that should be used for the disabled state',
  },
  form: {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
    },
    description: 'ID of the form that the form control belongs to. Sets the `form` attribute on the control',
  },
  'html-field': {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
      defaultValue: {
        summary: 'html',
      },
    },
    description: 'Field name in the `options` array that should be used for the html label instead of text field',
  },
  id: {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
    },
    description: 'Used to set the `id` attribute on the rendered content, and used as the base to generate any additional element IDs as needed',
  },
  name: {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
    },
    description: 'Sets the value of the `name` attribute on the form control',
  },
  options: {
    control: {
      type: 'object',
    },
    table: {
      type: {
        summary: 'Array | Object',
      },
      defaultValue: {
        summary: '[]',
      },
    },
    defaultValue: [
      {
        text: 'A',
        value: 'A',
        disabled: false,
      },
      {
        text: 'B',
        value: 'B',
        disabled: false,
      },
      {
        text: 'C',
        value: 'C',
        disabled: false,
      },
      {
        text: 'D',
        value: { d: 1 },
        disabled: true,
      },
      {
        text: 'E',
        value: 'E',
        disabled: false,
      },
      {
        text: 'F',
        value: 'F',
        disabled: false,
      },
    ],
    description: 'Array of items to render in the component',
  },
  plain: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'Render the form control in plain mode, rather than custom styled mode',
  },
  required: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'Adds the `required` attribute to the form control',
  },
  size: {
    control: {
      type: 'select',
      options: ['sm', 'md', 'lg'],
    },
    table: {
      type: {
        summary: 'String',
      },
    },
    description: 'Set the size of the component\'s appearance. `sm`, `md` (default), or `lg`',
  },
  stacked: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: true,
      },
    },
    defaultValue: true,
    description: 'When set, renders the checkbox group in stacked mode',
  },
  state: {
    control: {
      type: 'select',
      options: [true, false, null],
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: null,
      },
    },
    description: 'Controls the validation state appearance of the component. `true` for valid, `false` for invalid, or `null` for no validation state',
  },
  switches: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'When set, renders the checkboxes in the group with switch styling',
  },
  'text-field': {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
      defaultValue: {
        summary: 'text',
      },
    },
    description: 'Field name in the `options` array that should be used for the text label',
  },
  validated: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'When set, adds the Bootstrap class `was-validated` to the group wrapper',
  },
  'value-field': {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
      defaultValue: {
        summary: 'value',
      },
    },
    description: 'Field name in the `options` array that should be used for the value',
  },
  // Events
  '@input': {
    table: {
      type: {
        summary: null,
      },
    },
    description: 'Emitted with the select value changes via user interaction',
  },
  '@change': {
    table: {
      type: {
        summary: null,
      },
    },
    description: 'Emitted with the select value changes',
  },
  // Slots
  default: {
    table: {
      type: {
        summary: 'Slots',
      },
    },
    description: 'Content to place in the form checkbox',
  },
};