@mekari/mekari-ui-vue/src/components/FormCheckbox/stories/config/form-checkbox.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

import { colorList } from '@/.storybook/story-config';

export default {
  // Props
  ariaLabel: {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
    },
    description: 'Sets the value of `aria-label` attribute on the rendered element',
  },
  ariaLabelledby: {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
    },
    description: 'The ID of the element that provides a label for this component. Used as the value for the `aria-labelledby` attribute',
  },
  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: 'object',
    },
    table: {
      type: {
        summary: 'Any Type',
      },
    },
    description: 'The current value of the checkbox(es). Must be an array when there are multiple checkboxes bound to the same v-model',
  },
  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',
  },
  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',
  },
  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',
  },
  indeterminate: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'Renders the checkbox in an indeterminate state. Syncable via the .sync modifier',
  },
  inline: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'When set, renders the checkbox as an inline element rather than as a 100% width block',
  },
  name: {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
    },
    description: 'Sets the value of the `name` attribute on the form control',
  },
  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',
  },
  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',
  },
  switchSize: {
    control: {
      type: 'select',
      options: ['small', 'regular'],
    },
    description: 'Change the size of switch when `switch` props set to `true`.',
  },
  switchColor: {
    control: {
      type: 'select',
      options: [...colorList],
    },
    description: 'Change the color of switch when `switch` props set to `true`.',
  },
  enableSwitch: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'When set to `true`, it will make the checkbox in to a switch toggle.',
  },
  uncheckedValue: {
    control: {
      type: 'object',
    },
    table: {
      type: {
        summary: 'Any',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'Value returned when this checkbox is unchecked. Note not applicable when multiple checkboxes bound to the same v-model array',
  },
  value: {
    control: {
      type: 'String',
    },
    table: {
      type: {
        summary: 'Any Type',
      },
      defaultValue: {
        summary: null,
      },
    },
    defaultValue: null,
    description: 'Value returned when this checkbox is checked',
  },
  // 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 (form checkboxes) to place in the form checkbox group',
  },
  first: {
    table: {
      type: {
        summary: 'Slots',
      },
    },
    description: 'Slot to place form-checkbox\'s so that they appear before checkboxes generated from options prop',
  },
};