oa/documentation/field/v-field-addon-directional-documentation.md

state

state
currency amount $

Bi-Directional addons

Inputs can have addons on both sides. You can even attach a select element to your <VControl /> component. Please refer to the code example for more details about usage.

Note that if you need multiple inputs (like a <VSelect> addons for currency selection), you should wrap this other input with <VControl subcontrol> or <VField subcontrol> component.

<script setup lang="ts">

const currency = ref('$')
</script>

<template>
  <VField addons>
    <!-- currency selector with subcontrol -->
    <VControl subcontrol>
      <VSelect v-model="currency">
        <VOption value="$">
          $
        </VOption>
        <VOption value="£">
          £
        </VOption>
        <VOption value="€">
          €
        </VOption>
      </VSelect>
    </VControl>

    <!-- amount input -->
    <VControl expanded>
      <VInput
        v-model="amount"
        type="text"
        placeholder="Amount of money"
      />
    </VControl>

    <!-- submit -->
    <VControl>
      <VButton color="primary">
        Send Payment
      </VButton>
    </VControl>
  </VField>
</template>

$ £ € Send Payment