# Input

This page contains all possible variations of the VUE input component.

Use inputs when it is necessary to accept data from the user.

# Getting and Setting

As with most Vue input components, you have two options for setting the current GocoInput 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.

# Using v-model

Using v-model with GocoInput is simple to implement, this can be used to sync values with a parent:

  <GocoInput 
    :id="id" 
    :label="label" 
    v-model="value" 
  />

  data() {
    return {
      value: ""
    }
  }

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

The input exposes the value prop and an input event to enable this. You can bind the input value with :value="value", and use the input event to trigger a mutation or dispatch an action.

  <GocoInput 
    :id="id" 
    :label="label" 
    :value="value"
    @input="setInputValue" 
  />

  data() {
    return {
      value: ""
    }
  },
  methods: {
    setInputValue(value) {
      //  trigger a mutation, or dispatch an action  
    }
  }

# Default

<GocoInput id="input-default" label="Input label" />

# Sizes

# Small

<GocoInput id="input-default" label="Input label" size="small" />

# Dark

<GocoInput id="input-dark" label="Input label" dark />

# Prefix

<GocoInput id="input-prefix" label="Input label" prefix="£" />

# Suffix

<GocoInput id="input-suffix" label="Input label" suffix="Kwh" />

# With Icon

Add an icon inside the input.

# Left Icon

<GocoInput id="input-icon-left" label="Input label" icon="search" icon-position="left" />

# Right Icon

<GocoInput id="input-icon-right" label="Input label" icon="search" icon-position="right" />

# Component props