Label

1import "../checkbox/checkbox";
2import type { Meta, StoryObj } from "@storybook/web-components-vite";
3import { html } from "lit";
4 
5type LabelArgs = Omit<HTMLLabelElement, "children"> & { children?: string };
6 
7const meta: Meta<LabelArgs> = {
8  title: "ui/Label",
9  component: "label",
10  tags: ["autodocs"],
11  argTypes: {
12    children: {
13      control: "text",
14      description: "Label text content",
15    },
16  },
17  args: {
18    children: "Email",
19  },
20  parameters: {
21    layout: "centered",
22  },
23  render: (args) => html` <label class="ui-label"> ${args.children} </label> `,
24};
25 
26export default meta;
27type Story = StoryObj<LabelArgs>;
28 
29export const Default: Story = {};
30 
31export const WithInput: Story = {
32  render: (args) => html`
33    <div class="grid w-full gap-3">
34      <label class="ui-label" for="email">${args.children}</label>
35      <input id="email" class="ui-input" placeholder="Enter your email" class="w-96"></input>
36    </div>
37  `,
38};
39 
40export const WithRequiredIndicator: Story = {
41  render: (args) => html`
42    <div class="grid w-full gap-3">
43      <label class="ui-label" for="email">
44        ${args.children} <span class="text-destructive">*</span>
45      </label>
46      <input class="ui-input" type="email" required class="w-96"></input>
47    </div>
48  `,
49};
50 
51export const CustomStyling: Story = {
52  render: (args) => html`
53    <label class="ui-label text-base font-semibold"> ${args.children} </label>
54  `,
55  args: {
56    children: "Important Field",
57  },
58};
59 
60export const WithHelperText: Story = {
61  render: (args) => html`
62    <div class="grid w-full gap-3">
63      <label class="ui-label" for="email">${args.children}</label>
64      <input id="email" class="ui-input" placeholder="Enter your email" class="w-96"></input>
65      <p class="text-sm text-muted-foreground">We'll never share your email.</p>
66    </div>
67  `,
68};
69 
70export const PeerDisabled: Story = {
71  render: (args) => html`
72    <div class="flex items-center gap-2">
73      <ui-checkbox id="checkbox" class="peer" disabled checked></ui-checkbox>
74      <label class="ui-label" for="checkbox">${args.children}</label>
75    </div>
76  `,
77  args: {
78    children: "Disabled checkbox label",
79  },
80};