oa/documentation/field/v-field-id-tracking-documentation.md

Id Tracking

The main purpose of the VField component is to keep track of an unique input. It can then be used to be used to set for and aria-describedby attributes. You can create new field context using the subcontrol propery on VControl and VField components.

<template>
  <VField v-slot="{ id: fieldId }" grouped>
    <VLabel class="has-fullwidth">
      Focus {{ fieldId }} field
    </VLabel>
    <VControl v-slot="{ id }" subcontrol>
      <VInput type="text" placeholder="will not receive focus" />
      <p class="help">
        field id: {{ id }}
      </p>
    </VControl>
    <VControl v-slot="{ id }" subcontrol>
      <VInput type="text" placeholder="will receive focus" />
      <p class="help">
        field id: {{ id }}
      </p>
    </VControl>
  </VField>
</template>

Focus {{ fieldId }} field

field id: {{ id }}

field id: {{ id }}