diff --git a/components/doc/dropdown/floatlabeldoc.js b/components/doc/dropdown/floatlabeldoc.js
index 7477afe488..23a7f78dfc 100644
--- a/components/doc/dropdown/floatlabeldoc.js
+++ b/components/doc/dropdown/floatlabeldoc.js
@@ -39,8 +39,8 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel className="w-full md:w-14rem">
-                <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
-                <label htmlFor="dd-city">Select a City</label>
+                <Dropdown ariaLabelledBy="dd-city-label" inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+                <label htmlFor="dd-city" id="dd-city-label">Select a City</label>
             </FloatLabel>
         </div>
     )
@@ -69,8 +69,8 @@ export default function FloatLabelDemo() {
     return (
         <div className="card flex justify-content-center">
             <FloatLabel className="w-full md:w-14rem">
-                <Dropdown inputId="dd-city" value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
-                <label htmlFor="dd-city">Select a City</label>
+                <Dropdown ariaLabelledBy="dd-city-label" inputId="dd-city" value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+                <label htmlFor="dd-city" id="dd-city-label">Select a City</label>
             </FloatLabel>
         </div>
     )
@@ -85,8 +85,10 @@ export default function FloatLabelDemo() {
             </DocSectionText>
             <div className="card flex justify-content-center">
                 <FloatLabel className="w-full md:w-14rem">
-                    <Dropdown inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
-                    <label htmlFor="dd-city">Select a City</label>
+                    <Dropdown ariaLabelledBy="dd-city-floatlabel" inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" showClear className="w-full" />
+                    <label htmlFor="dd-city" id="dd-city-floatlabel">
+                        Select a City
+                    </label>
                 </FloatLabel>
             </div>
             <DocSectionCode code={code} />
diff --git a/components/doc/dropdown/labeldoc.js b/components/doc/dropdown/labeldoc.js
new file mode 100644
index 0000000000..d31da71ee1
--- /dev/null
+++ b/components/doc/dropdown/labeldoc.js
@@ -0,0 +1,97 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Dropdown } from '@/components/lib/dropdown/Dropdown';
+import { useState } from 'react';
+
+export function LabelDoc(props) {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    const code = {
+        basic: `
+<div>
+    <label htmlFor="dd-city" id="dd-city-label">Select a City</label>
+    <Dropdown ariaLabelledBy="dd-city-label" inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+</div>
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Dropdown } from 'primereact/dropdown';
+
+export default function FloatLabelDemo() {
+    const [selectedCity, setSelectedCity] = useState(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="w-full md:w-14rem">
+                <label htmlFor="dd-city" id="dd-city-label">Select a City</label>
+                <Dropdown ariaLabelledBy="dd-city-label" inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+            </div>
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { div } from 'primereact/floatlabel';
+
+interface City {
+    name: string;
+    code: string;
+}
+
+export default function FloatLabelDemo() {
+    const [selectedCity, setSelectedCity] = useState<City | null>(null);
+    const cities: City[] = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+
+    return (
+        <div className="card flex justify-content-center">
+            <div className="w-full md:w-14rem">
+                <label htmlFor="dd-city" id="dd-city-label">Select a City</label>
+                <Dropdown ariaLabelledBy="dd-city-label" inputId="dd-city" value={selectedCity} onChange={(e: DropdownChangeEvent) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+            </div>
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Dropdown associated with a label using the <i>aria-labelledby</i> property and the label element's <i>id</i> attribute.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <div className="w-full md:w-14rem">
+                    <label className="px-2" htmlFor="dd-city" id="dd-city-label">
+                        Select a City
+                    </label>
+                    <Dropdown ariaLabelledBy="dd-city-label" inputId="dd-city" value={selectedCity} onChange={(e) => setSelectedCity(e.value)} options={cities} optionLabel="name" className="w-full" />
+                </div>
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}