Field with multiple HelperText instances

[loicplaire]

The issue

Framework: Vue 3
Ark UI Version: 5.25.0

The Field component currently only supports a single Field.HelperText instance. However, I have a use case where my design system component might have two separate helper texts associated with the same field:

Potential solution

I could implement a solution using Field.RootProvider with a custom field context:

<script setup>
import { Field, useField } from '@ark-ui/vue';
import { computed } from 'vue';

const field = useField(fieldProps);

// Custom aria-describedby that includes multiple helper text IDs
const customAriaDescribedby = computed(() => {
  const ids = [];
  if (supportText) ids.push(field.value.ids.helperText);
  if (validationState === 'success' && validationText) {
    ids.push(`${field.value.ids.control}-success`);
  }
  return ids.join(' ');
});

// Override field context with custom aria-describedby
const customField = computed(() => ({
  ...field.value,
  ariaDescribedby: customAriaDescribedby.value,
  getInputProps: () => ({
    ...field.value.getInputProps(),
    'aria-describedby': customAriaDescribedby.value,
  }),
}));
</script>

<template>
  <Field.RootProvider :value="customField">
    <Field.HelperText v-if="supportText">{{ supportText }}</Field.HelperText>
    <Field.Input />
    <!-- Success validation as standalone with custom ID -->
    <span 
      v-if="validationState === 'success' && validationText"
      :id="`${field.ids.control}-success`"
    >
      {{ validationText }}
    </span>
  </Field.RootProvider>
</template>

Questions

• Is this the recommended approach for multiple helper texts, or is there a simpler way?
• Would the Ark UI team consider adding native support for multiple helper texts?
• Has anyone else encountered this use case and found a cleaner solution?

Any guidance or alternative approaches would be really appreciated! 🙏

[segunadebayo]

That's a valid use case. We'll consider adding it.