diff --git a/apps/docs/src/config/docs.ts b/apps/docs/src/config/docs.ts
index a6ede2b1..08875e72 100644
--- a/apps/docs/src/config/docs.ts
+++ b/apps/docs/src/config/docs.ts
@@ -100,6 +100,10 @@ export const docsConfig: Config = {
           title: "Input Group",
           href: "/docs/components/input-group"
         },
+        {
+          title: "Label",
+          href: "/docs/components/label"
+        },
         {
           title: "Radio Group",
           href: "/docs/components/radio-group"
diff --git a/apps/docs/src/registry/__index__.tsx b/apps/docs/src/registry/__index__.tsx
index bddec368..e61f8f7b 100644
--- a/apps/docs/src/registry/__index__.tsx
+++ b/apps/docs/src/registry/__index__.tsx
@@ -274,6 +274,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined
   },
+  "label": {
+    name: "label",
+    description: "",
+    type: "registry:ui",
+    registryDependencies: undefined,
+    component: lazy(() => import("~/registry/ui/label.tsx")),
+    files: [{
+      path: "registry/ui/label.tsx",
+      type: "registry:ui",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "input-group": {
     name: "input-group",
     description: "",
@@ -1312,6 +1326,20 @@ export const Index: Record<string, any> = {
     categories: undefined,
     meta: undefined
   },
+  "label-demo": {
+    name: "label-demo",
+    description: "",
+    type: "registry:example",
+    registryDependencies: ["label","checkbox"],
+    component: lazy(() => import("~/registry/examples/label-demo.tsx")),
+    files: [{
+      path: "registry/examples/label-demo.tsx",
+      type: "registry:example",
+      target: ""
+    }],
+    categories: undefined,
+    meta: undefined,
+  },
   "radio-group-demo": {
     name: "radio-group-demo",
     description: "",
diff --git a/apps/docs/src/registry/examples/_registry.ts b/apps/docs/src/registry/examples/_registry.ts
index fd90119d..afaca637 100644
--- a/apps/docs/src/registry/examples/_registry.ts
+++ b/apps/docs/src/registry/examples/_registry.ts
@@ -651,6 +651,17 @@ export const examples: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "label-demo",
+    type: "registry:example",
+    registryDependencies: ["label", "checkbox"],
+    files: [
+      {
+        path: "examples/label-demo.tsx",
+        type: "registry:example"
+      }
+    ]
+  },
   {
     name: "radio-group-demo",
     type: "registry:example",
diff --git a/apps/docs/src/registry/examples/label-demo.tsx b/apps/docs/src/registry/examples/label-demo.tsx
new file mode 100644
index 00000000..79019529
--- /dev/null
+++ b/apps/docs/src/registry/examples/label-demo.tsx
@@ -0,0 +1,11 @@
+import { Checkbox } from "~/registry/ui/checkbox"
+import { Label } from "~/registry/ui/label"
+
+export default function LabelDemo() {
+  return (
+    <div class="flex items-center space-x-2">
+      <Checkbox id="terms" />
+      <Label for="terms">Accept terms and conditions</Label>
+    </div>
+  )
+}
diff --git a/apps/docs/src/registry/styles/style-lyra.css b/apps/docs/src/registry/styles/style-lyra.css
index 37760afb..e72bac05 100644
--- a/apps/docs/src/registry/styles/style-lyra.css
+++ b/apps/docs/src/registry/styles/style-lyra.css
@@ -716,7 +716,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-xs leading-none group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-xs leading-none group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */
diff --git a/apps/docs/src/registry/styles/style-maia.css b/apps/docs/src/registry/styles/style-maia.css
index 8f399321..19563854 100644
--- a/apps/docs/src/registry/styles/style-maia.css
+++ b/apps/docs/src/registry/styles/style-maia.css
@@ -741,7 +741,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-sm leading-none font-medium group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */
diff --git a/apps/docs/src/registry/styles/style-mira.css b/apps/docs/src/registry/styles/style-mira.css
index 00d8b6ec..45cb75de 100644
--- a/apps/docs/src/registry/styles/style-mira.css
+++ b/apps/docs/src/registry/styles/style-mira.css
@@ -741,7 +741,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-xs/relaxed leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-xs/relaxed leading-none font-medium group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */
diff --git a/apps/docs/src/registry/styles/style-nova.css b/apps/docs/src/registry/styles/style-nova.css
index d983b501..e736cead 100644
--- a/apps/docs/src/registry/styles/style-nova.css
+++ b/apps/docs/src/registry/styles/style-nova.css
@@ -741,7 +741,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-sm leading-none font-medium group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */
diff --git a/apps/docs/src/registry/styles/style-vega.css b/apps/docs/src/registry/styles/style-vega.css
index 852e9fbe..7fd5d0bf 100644
--- a/apps/docs/src/registry/styles/style-vega.css
+++ b/apps/docs/src/registry/styles/style-vega.css
@@ -737,7 +737,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50;
+    @apply gap-2 text-sm leading-none font-medium group-data-disabled:opacity-50 peer-disabled:opacity-50 peer-data-disabled:opacity-50;
   }
 
   /* MARK: Menubar */
diff --git a/apps/docs/src/registry/ui/_registry.ts b/apps/docs/src/registry/ui/_registry.ts
index b93c3b6f..60c5a50c 100644
--- a/apps/docs/src/registry/ui/_registry.ts
+++ b/apps/docs/src/registry/ui/_registry.ts
@@ -177,6 +177,16 @@ export const ui: Registry["items"] = [
       }
     ]
   },
+  {
+    name: "label",
+    type: "registry:ui",
+    files: [
+      {
+        path: "ui/label.tsx",
+        type: "registry:ui"
+      }
+    ]
+  },
   {
     name: "input-group",
     type: "registry:ui",
diff --git a/apps/docs/src/registry/ui/label.tsx b/apps/docs/src/registry/ui/label.tsx
index afeefcf5..f1afb8f7 100644
--- a/apps/docs/src/registry/ui/label.tsx
+++ b/apps/docs/src/registry/ui/label.tsx
@@ -4,11 +4,11 @@ import { splitProps } from "solid-js"
 import { cn } from "~/lib/utils"
 
 const Label: Component<ComponentProps<"label">> = (props) => {
-  const [local, others] = splitProps(props, ["class", "for"])
+  const [local, others] = splitProps(props, ["class"])
   return (
     <label
       class={cn(
-        "flex select-none items-center gap-2 font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        "cn-label flex select-none items-center peer-disabled:cursor-not-allowed group-data-disabled:pointer-events-none peer-data-disabled:cursor-not-allowed",
         local.class
       )}
       data-slot="label"
diff --git a/apps/docs/src/routes/docs/components/label.mdx b/apps/docs/src/routes/docs/components/label.mdx
new file mode 100644
index 00000000..a96c4b1c
--- /dev/null
+++ b/apps/docs/src/routes/docs/components/label.mdx
@@ -0,0 +1,45 @@
+---
+title: Label
+description: Renders an accessible label associated with controls.
+---
+
+::::tab-group[preview]
+:::tab[Preview]
+
+<ComponentPreview name="label-demo" />
+
+:::
+:::tab[Code]
+
+```file="~/registry/examples/label-demo" frame=none showLineNumbers
+
+```
+
+:::
+::::
+
+## Installation
+
+### CLI
+
+```package-exec
+solidui-cli@latest add label
+```
+
+### Manual
+
+Copy and paste the following code into your project.
+
+```file="~/registry/ui/label.tsx" showLineNumbers
+
+```
+
+## Usage
+
+```tsx
+import { Label } from "~/components/ui/label";
+```
+
+```tsx
+<Label for="email">Your email address</Label>
+```