{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "label",
  "title": "Label",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Renders an accessible label associated with controls.",
  "dependencies": [],
  "files": [
    {
      "path": "registry/ui/label/label.stories.ts",
      "content": "import \"../checkbox/checkbox\";\nimport type { Meta, StoryObj } from \"@storybook/web-components-vite\";\nimport { html } from \"lit\";\n\ntype LabelArgs = Omit<HTMLLabelElement, \"children\"> & { children?: string };\n\nconst meta: Meta<LabelArgs> = {\n  title: \"ui/Label\",\n  component: \"label\",\n  tags: [\"autodocs\"],\n  argTypes: {\n    children: {\n      control: \"text\",\n      description: \"Label text content\",\n    },\n  },\n  args: {\n    children: \"Email\",\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n  render: (args) => html` <label class=\"ui-label\"> ${args.children} </label> `,\n};\n\nexport default meta;\ntype Story = StoryObj<LabelArgs>;\n\nexport const Default: Story = {};\n\nexport const WithInput: Story = {\n  render: (args) => html`\n    <div class=\"grid w-full gap-3\">\n      <label class=\"ui-label\" for=\"email\">${args.children}</label>\n      <input id=\"email\" class=\"ui-input\" placeholder=\"Enter your email\" class=\"w-96\"></input>\n    </div>\n  `,\n};\n\nexport const WithRequiredIndicator: Story = {\n  render: (args) => html`\n    <div class=\"grid w-full gap-3\">\n      <label class=\"ui-label\" for=\"email\">\n        ${args.children} <span class=\"text-destructive\">*</span>\n      </label>\n      <input class=\"ui-input\" type=\"email\" required class=\"w-96\"></input>\n    </div>\n  `,\n};\n\nexport const CustomStyling: Story = {\n  render: (args) => html`\n    <label class=\"ui-label text-base font-semibold\"> ${args.children} </label>\n  `,\n  args: {\n    children: \"Important Field\",\n  },\n};\n\nexport const WithHelperText: Story = {\n  render: (args) => html`\n    <div class=\"grid w-full gap-3\">\n      <label class=\"ui-label\" for=\"email\">${args.children}</label>\n      <input id=\"email\" class=\"ui-input\" placeholder=\"Enter your email\" class=\"w-96\"></input>\n      <p class=\"text-sm text-muted-foreground\">We'll never share your email.</p>\n    </div>\n  `,\n};\n\nexport const PeerDisabled: Story = {\n  render: (args) => html`\n    <div class=\"flex items-center gap-2\">\n      <ui-checkbox id=\"checkbox\" class=\"peer\" disabled checked></ui-checkbox>\n      <label class=\"ui-label\" for=\"checkbox\">${args.children}</label>\n    </div>\n  `,\n  args: {\n    children: \"Disabled checkbox label\",\n  },\n};\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    "@utility ui-label": {
      "@apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70": {}
    }
  },
  "categories": [
    "ui",
    "form",
    "web-component"
  ],
  "type": "registry:component"
}