# Yes No

The GocoYesNo component allows users to choose an option from a collection of radio buttons.

# Default

The below example is a default implementation of the GocoYesNo component. GocoYesNo requires 2 props to function. A name prop and a values prop.

<GocoYesNo
  :name="$page.frontmatter.name"
  :values="$page.frontmatter.values"
/>

# Props

# Name

The name prop is used to assign the name Html attribute to each radio button within the component. This should be a string and can contain any characters including spaces etc. It's required to ensure native browser behaviour for radio buttons and prevents the user from ever selecting more than one option.

# Values

The values prop is used to populate each radio button with data. This prop accepts an array of objects and each object should contain:

• id: Assign an ID for the radio, ensure this is unique across the entire web page or you will find radios conflicting with one another.
• label: Assign a string to appear inside the radio button such as Yes, True, False etc

An example array is shown below:

exampleValues = [
  {
    id: "yes",
    label: "Yes"
  },
  {
    id: "no",
    label: "No"
  }
];

# Pre-Selected Option

By default, GocoYesNo will render on the page with no options selected, assuming you pass nothing to the selected prop. This can be changed by providing a pre-selected option and this is achieved pre-populating the selected prop.

This prop accepts an object and must exactly match one of the objects in the values prop array.

In the example below, the second object in the values array is chosen as the pre-selected option.

<GocoYesNo
  :name="$page.frontmatter.preSelectName"
  :values="$page.frontmatter.preSelectValues"
  :selected="$page.frontmatter.preSelectValues[1]"
/>

# Event Binding

As with most Vue input components, GocoYesNo supports both options for returning values on radio event changes:

• Native v-model works for basic two-way data binding on form elements. This is essentially just 'syntax sugar' and requires less code than the alternative approach.
• The alternative approach is that you manually update the components data via an event change on the input. Useful if you're using state management libraries such as Vuex.

Both of the above approaches are covered in the next section.

# Using v-model

Using v-model with GocoYesNo is simple to implement, this can be used to sync values with a parent stored on the components data:

  <GocoYesNo
    :name="Example Name"
    :values="valuesArray"
    v-model="selected" 
  />

This example shows no radio is currently selected, but this would dynamically change automatically using the v-model attribute above.

  data() {
    return {    
      selected: null
    }
  }

# Using Props and Events

If you're using a state management library such as Vuex, you'll need to trigger a mutation using the Vuex API instead of updating the data on a component level.

GocoYesNo has two props to handle event changes and data. These are:

• selected: Assign the value of the currently selected Yes/No radio
• @changed: Assign a component method to accept the change event data

The @changed event returns the matching object from the values prop. It contains the exact data provided in one of the matching values prop objects.

A simple implementation could look like the following:

Bind a method to the @changed prop on GocoYesNo.

  <GocoYesNo
    :name="Example Name"
    :values="valuesArray"
    :selected="selected"
    @changed="setSelectedRadio" 
  />

Inside the component, create a method (setSelectedRadio) to trigger an action for Vuex. The computed method can return the store value when the component loads on the page since computed methods in vue are cached.

  computed: {
    selectedOption() {
      return this.$store.getters.radioValue;
    }
  },
  methods: {
    setSelectedRadio(radioValue) {
      // radioValue = { id: "yes" , label: "Yes" } etc
    }
  }

# Sizes

# Small

<GocoYesNo
  :name="$page.frontmatter.smallName"
  :values="$page.frontmatter.smallValues"
  size="small"
/>

# Dark

<GocoYesNo
  :name="$page.frontmatter.darkName"
  :values="$page.frontmatter.darkValues"
  dark
/>

# Component props