@mekari/mekari-ui-vue/src/components/FormRadio/stories/config/form-radio.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
  ariaLabel: {
    control: {
      type: 'text',
    },
    table: {
      type: {
        summary: 'String',
      },
    },
    description: 'Sets the value of `aria-label` attribute on the rendered element',
  },
  ariaDescribedby: {
    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 radio(s)',
  },
  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',
  },
  inline: {
    control: {
      type: 'boolean',
    },
    table: {
      type: {
        summary: 'Boolean',
      },
      defaultValue: {
        summary: false,
      },
    },
    description: 'When set, renders the radio 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',
  },
  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`',
  },
  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',
  },
  value: {
    control: {
      type: 'object',
    },
    table: {
      type: {
        summary: 'Any Type',
      },
    },
    description: 'Value returned when this radio 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 radios) to place in the form radio group',
  },
  first: {
    table: {
      type: {
        summary: 'Slots',
      },
    },
    description: 'Slot to place form-radio\'s so that they appear before radios generated from options prop',
  },
};