Input

1import "../button/button";
2import type { Meta, StoryObj } from "@storybook/web-components-vite";
3import { html } from "lit";
4 
5type InputArgs = HTMLInputElement;
6 
7/**
8 * Displays a form input field or a component that looks like an input field.
9 */
10const meta: Meta<InputArgs> = {
11  title: "ui/Input",
12  component: "input",
13  tags: ["autodocs"],
14  argTypes: {
15    type: {
16      control: "text",
17    },
18    placeholder: {
19      control: "text",
20    },
21    disabled: {
22      control: "boolean",
23    },
24  },
25  args: {
26    type: "email",
27    placeholder: "Email",
28    disabled: false,
29  },
30  parameters: {
31    layout: "centered",
32  },
33  render: (args) =>
34    html`<input
35      type=${args.type as any}
36      class="ui-input"
37      placeholder=${args.placeholder}
38      ?disabled=${args.disabled}
39      class="w-96"
40    ></input>`,
41};
42 
43export default meta;
44 
45type Story = StoryObj<InputArgs>;
46 
47/**
48 * The default form of the input field.
49 */
50export const Default: Story = {};
51 
52/**
53 * Use the `disabled` prop to make the input non-interactive and appears faded,
54 * indicating that input is not currently accepted.
55 */
56export const Disabled: Story = {
57  args: { disabled: true },
58};
59 
60/**
61 * Use the `Label` component to includes a clear, descriptive label above or
62 * alongside the input area to guide users.
63 */
64export const WithLabel: Story = {
65  render: (args) => html`
66    <div class="grid gap-1.5">
67      <label for="email" class="ui-label">
68        ${args.placeholder}
69      </label>
70      <input
71        id="email" class="ui-input"
72        type=${args.type as any}
73        placeholder=${args.placeholder}
74        ?disabled=${args.disabled}
75        class="w-96"
76      ></input>
77    </div>
78  `,
79};
80 
81/**
82 * Use a text element below the input field to provide additional instructions
83 * or information to users.
84 */
85export const WithHelperText: Story = {
86  render: (args) => html`
87    <div class="grid gap-1.5">
88      <label for="email-2" class="ui-label">
89        ${args.placeholder}
90      </label>
91      <input
92        id="email-2" class="ui-input"
93        type=${args.type as any}
94        placeholder=${args.placeholder}
95        ?disabled=${args.disabled}
96        class="w-96"
97      ></input>
98      <p class="text-sm text-foreground/60">Enter your email address.</p>
99    </div>
100  `,
101};
102 
103/**
104 * Use the `Button` component to indicate that the input field can be submitted
105 * or used to trigger an action.
106 */
107export const WithButton: Story = {
108  render: (args) => html`
109// … truncated