import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks';
import { boolean, text } from '@storybook/addon-knobs';
import ChecRadio from '../../components/ChecRadio.vue';

<Meta title="Form fields/Radio button" component={ ChecRadio } />

# Radio button group

#### Radio buttons allow the user to select only one option from a radio group.
- Use radio buttons when the user needs to see all available options
- Use radio group when there are 2-4 options to choose from
- Use dropdown menu with selects if there are more than 4 options or options do not need to be visible

<Props of={ChecRadio} />

<Preview>
  <Story name="Radio group">
    {{
      components: {
        ChecRadio
      },
      props: {
        label: {
          default: text("Label", "Option 1", "Props")
        },
        disabled: {
          default: boolean("Disable", false, "Props")
        },
        required: {
          default: boolean("Required", false, "Props")
        }
      },
      data(){
        return {
          checked: '',
        };
      },
      template: `
        <div class="py-16 font-lato flex justify-center bg-gray-100">
        <ul>
          <li>
            <ChecRadio
              name="one"
              :label="label"
              value="a"
              :disabled="disabled"
              :required="required"
              v-model="checked"
            >
              {{ label }}
            </ChecRadio>
          </li>
          <li>
            <ChecRadio
              label="Option 2"
              name="two"
              value="b"
              :disabled="disabled"
              :required="required"
              v-model="checked"
            />
          </li>
          <li>
            <ChecRadio
              label="Option 3"
              name="three"
              value="c"
              :disabled="disabled"
              :required="required"
              v-model="checked"
            />
          </li>
          <li>
            <ChecRadio
              label="Disabled"
              name="four"
              value="d"
              disabled="disabled"
              :required="required"
              v-model="checked"
            />
          </li>
          </ul>
        </div>`,
    }}
  </Story>
</Preview>
