@gitlab/ui/dist/components/base/form/form_radio/form_radio.documentation.js

GitLab UI Components

import examples from './examples';

var description = "# GlFormRadio\n\nA radio button typically represents a single option in a group of related\nchoices. Each radio button is boolean and only one can be selected at a time.\n\n## Usage\n\n`GlFormRadio` components can be used directly, or via a `GlFormRadioGroup`.\n\nBelow is an example which demonstrates the direct approach. For examples using\n`GlFormRadioGroup`, see the documentation for that component.\n\n```html\n<script>\nexport default {\n  data() {\n    return {\n      selected: 'yes',\n    };\n  },\n};\n</script>\n\n<template>\n  <div>\n    <gl-form-radio v-model=\"selected\" value=\"yes\">Yes</gl-form-radio>\n    <gl-form-radio v-model=\"selected\" value=\"no\">No</gl-form-radio>\n  </div>\n</template>\n```\n";

var form_radio_documentation = {
  description,
  examples,
  followsDesignSystem: true,
  bootstrapComponent: 'b-form-radio',
  propsInfo: {
    checked: {
      additionalInfo: 'The current value of the radio(s)'
    }
  },
  events: [{
    event: 'input',
    args: [{
      arg: 'checked',
      description: 'current selected value of radio group'
    }],
    description: 'Emitted when the selected value is changed'
  }, {
    event: 'change',
    args: [{
      arg: 'checked',
      description: 'current selected value of radio group'
    }],
    description: 'Emitted when the selected value is changed due to user interaction'
  }],
  slots: [{
    name: 'help',
    description: 'Content provided here will be shown beneath the radio. Typically used for help or descriptive text.'
  }, {
    name: 'default',
    description: 'Content to use for the label'
  }]
};

export default form_radio_documentation;