Allow to pass label and description via props

[thewebartisan7]

🔗 Linked issue

Issue

❓ Type of change

• 📖 Documentation (coming)
• 👌 Enhancement (improving an existing functionality like performance)

📚 Description

Describe the feature
Right now we have many components for input, example:

          <FormField v-slot="{ componentField }" name="name">
            <FormItem>
              <FormLabel>Name</FormLabel>

              <FormControl>
                <Input
                  type="text"
                  placeholder="Your name"
                  v-bind="componentField"
                />
              </FormControl>

              <FormDescription>
               This is your public display name.
              </FormDescription>

              <FormMessage />
            </FormItem>
          </FormField>

We can reduce by passing, optionally, the label and description via props, and also the error is display conditionally instead of description, such avoiding to have description and error which doesn't looks good.

          <FormField v-slot="{ componentField }" name="name">
            <FormItem>
              <FormControl
                label="Name"
                description="This is your public display name."
               >
                <Input
                  type="text"
                  placeholder="How we can call you?"
                  v-bind="componentField"
                  autofocus
                />
              </FormControl>
            </FormItem>
          </FormField>

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

NOTE: I will update docs showing an example if this PR is ok to be merged.

[thewebartisan7]

Result without error:

With error:

[thewebartisan7]

I found a problem in my PR. We can't use const { error } = useFormField(); in FormItem.vue to check if there is an error because the FORM_ITEM_INJECTION_KEY is not yet provided at that point.

If we want to hide description when there is an error, then we have to do this inside FormDescription.vue , I don't see other way. For example:

FormDescription

<script lang="ts" setup>
import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "vue";
import { useFormField } from "./useFormField";

const props = defineProps<{
  class?: HTMLAttributes["class"];
}>();

const { formDescriptionId, error } = useFormField();
</script>

<template>
  <p
    :id="formDescriptionId"
    :class="cn('text-sm text-muted-foreground', props.class)"
    v-if="!error"
  >
    <slot />
  </p>

  <FormMessage v-if="error" />
</template>

But this will be breaking changes for form that has already loaded FormMessage.vue manually, so we could add a new prop in FormDescription like withError or toggleError which by default is false. Or a new component like FormItemDescription.vue (so it's clear that is being loade inside FormItem.vue).

But of course this additional feature to toggle error and description is something else, and in case you don't want, we can just keep the other one.

Let me know what do you think.

[thewebartisan7]

I found a better way to handle this by using FormControl.vue
Looking for to hear from you.