# Select

The GocoSelect component renders a select input and allows users to choose an option from a list. This page contains all possible variations of the GocoSelect component.

# Default

A basic implementation of GocoSelect.

The options value $page.frontmatter.options is explained in the next section and is for demonstration purposes.

<GocoSelect
  :options="$page.frontmatter.options"
/>

# Options

Populating GocoSelect with a list of options is done so via the options prop - this is a required prop. It accepts an array of options and the format for the array is documented below.

# Example Implementation

The options prop accepts an array of objects, and each object must have keys for name and value. The values for these keys can be whatever is suitable for the implementation, but here's an example:

$page.frontmatter.options is declared in this way as it allows us to reference the same data set on each GocoSelect example found on this page. In practice, you can use whatever variable name you wish.

$page.frontmatter.options = [
  {
    name: "Item 1",
    value: "item-1"
  },
  {
    name: "Item 2",
    value: "item-2"
  },
  {
    name: "Item 3",
    value: "item-3",
  }];

# Getting and Setting

As with most Vue input components, you have two options for setting the current GocoSelect value and also returning the value on input 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 GocoSelect is simple to implement, this can be used to sync values with a parent:

  <GocoSelect
    :options="options"
    v-model="selected"
  />

  data() {
    return {
      // Assumes we want to set the first option as the default
      selected: options[0]
    }
  }

# 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.

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

• selectedOption: Assign the value of the currently selected option
• changed: Assign a component method to accept the change event. Then trigger a mutation or dispatch and action.

A simple implementation could look like the following:

  <GocoSelect
    :options="options"
    :selectedOption="selected"
    @changed="setSelectedOption" 
  />

The component JS would be:

  data() {
    return {
      options: [{name: "foo", value: "bar"}, {name: "foo2", value: "bar2"}]
    }
  },
  computed: {
    selectedOption() {
      return this.$store.getters.selected; // ex. {name: "foo2", value: "bar2"}
    }
  },
  methods: {
    setSelectedOption(option) {
      //  trigger a mutation, or dispatch an action  
    }
  }

# Placeholder

The optional placeholder prop accepts an object and assigns its values as the first option within GocoSelect. It is always inserted as the first option within a given list of options.

# Key Value Pairs for Placeholder

# Example Implementation

The below implementation shows how the placeholder prop can be assigned and the expected output.

  $page.frontmatter.placeholder = {
    name: "Please choose an option",
    disabled: true
  }

<GocoSelect
  :options="$page.frontmatter.options"
  :placeholder="$page.frontmatter.placeholder"
/>

# Output

GocoSelect will render the following on the front-end:

<select class="goco-c-select">
  <option value="null" disabled="disabled" selected>Please choose an option</option>
  <option value="item-1">Item 1</option>
  <option value="item-2">Item 2</option>
  <option value="item-3">Item 3</option>
</select>

# Sizes

# Small

<GocoSelect
  size="small"
  :options="$page.frontmatter.options"
/>

# Dark

An optional dark prop can be used to alter the colour of the select to a dark variant.

<GocoSelect
  dark
  :options="$page.frontmatter.options"
/>

# Component props