diff --git a/apps/www/src/lib/registry/default/ui/form/FormControl.vue b/apps/www/src/lib/registry/default/ui/form/FormControl.vue
index 8459cab87..3bbc6b0cb 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormControl.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormControl.vue
@@ -1,16 +1,35 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
-import { useFormField } from './useFormField'
+import { Slot } from 'radix-vue';
+import { useFormField } from './useFormField';
 
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const props = defineProps<{
+  label?: string;
+  description?: string;
+}>();
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>
+  <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
+
   <Slot
     :id="formItemId"
-    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-describedby="
+      !error
+        ? `${formDescriptionId}`
+        : props.description
+        ? `${formMessageId}`
+        : `${formDescriptionId} ${formMessageId}`
+    "
     :aria-invalid="!!error"
   >
     <slot />
   </Slot>
+
+  <FormDescription v-if="props.description && !error">
+    {{ props.description }}
+  </FormDescription>
+
+  <FormMessage v-if="props.description" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue b/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
index 8459cab87..3bbc6b0cb 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormControl.vue
@@ -1,16 +1,35 @@
 <script lang="ts" setup>
-import { Slot } from 'radix-vue'
-import { useFormField } from './useFormField'
+import { Slot } from 'radix-vue';
+import { useFormField } from './useFormField';
 
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+const props = defineProps<{
+  label?: string;
+  description?: string;
+}>();
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 </script>
 
 <template>
+  <FormLabel v-if="props.label">{{ props.label }}</FormLabel>
+
   <Slot
     :id="formItemId"
-    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-describedby="
+      !error
+        ? `${formDescriptionId}`
+        : props.description
+        ? `${formMessageId}`
+        : `${formDescriptionId} ${formMessageId}`
+    "
     :aria-invalid="!!error"
   >
     <slot />
   </Slot>
+
+  <FormDescription v-if="props.description && !error">
+    {{ props.description }}
+  </FormDescription>
+
+  <FormMessage v-if="props.description" />
 </template>