# Input

Form input component with icons, password toggle, and validation. Use `Label()` and `Tooltip()` as wrappers for label and tooltip functionality.

## Tag

`Input`

## Props

| Prop          | Type                         | Default  | Description                                      |
| :------------ | :--------------------------- | :------- | :----------------------------------------------- |
| `type`        | `string`                     | `'text'` | Input type (text, password, email, number, date) |
| `value`       | `string \| Signal<string>`   | `''`     | Input value                                      |
| `placeholder` | `string`                     | `' '`    | Placeholder text                                 |
| `icon`        | `string \| VNode \| Signal`  | `-`      | Icon displayed inside input                      |
| `disabled`    | `boolean \| Signal<boolean>` | `false`  | Disabled state                                   |
| `class`       | `string`                     | `''`     | Additional CSS classes (DaisyUI + Tailwind)      |
| `oninput`     | `function`                   | `-`      | Input event handler                              |
| `validate`    | `function`                   | `-`      | Validation function returning error message      |

## Styling

Input supports all **daisyUI Input classes**:

| Category | Keywords                                                                                                          | Description          |
| :------- | :---------------------------------------------------------------------------------------------------------------- | :------------------- |
| Style    | `input-bordered`, `input-ghost`                                                                                   | Input style variants |
| Color    | `input-primary`, `input-secondary`, `input-accent`, `input-info`, `input-success`, `input-warning`, `input-error` | Input color variants |
| Size     | `input-xs`, `input-sm`, `input-md`, `input-lg`                                                                    | Input size variants  |

## Live Examples

### Basic Input

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  const name = $("");

  return Input({
    placeholder: "Enter your name",
    value: name,
    oninput: (e) => name(e.target.value),
  });
};
Mount(BasicDemo, "#demo-basic");
```

### With Icon

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-icon" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const IconDemo = () => {
  const email = $("");

  return Label({ class: "input" }, [
    Icon("✉️"),
    Input({
      class: "grow", 
      type: "email",
      value: email,
      oninput: (e) => email(e.target.value),
    }),
  ]);
};
Mount(IconDemo, "#demo-icon");
```

### Password with Toggle

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-password" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const PasswordDemo = () => {
  const password = $("");
  const visible = $(false);

  return Label({ class: "input input-bordered w-full max-w-xs" }, [
    Icon("icon-[lucide--lock]"),
    Input({
      type: () => (visible() ? "text" : "password"),
      value: password,
      placeholder: "Contraseña",
      class: "grow",
      oninput: (e) => password(e.target.value),
    }),
    Swap({
      value: visible,
      class: "swap-rotate",
      on: Icon("icon-[lucide--eye]"),
      off: Icon("icon-[lucide--eye-off]"),
    }),
  ]);
};
Mount(PasswordDemo, "#demo-password");
```

### With Floating Label

Wrap the input with `Label()` component:

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-label" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const LabelDemo = () => {
  const email = $("");

  return Label({ class: "floating-label" }, [
    Span("Text floating"),
    Input({
      type: "email",
      label: "Email",
      value: email,
      placeholder: "Clic here",
      oninput: (e) => email(e.target.value),
    }),
  ]);
};
Mount(LabelDemo, "#demo-label");
```

### With Tooltip & label

Wrap the input with `Tooltip()` component:

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const TooltipDemo = () => {
  const username = $("");

  return Tooltip(
    { tip: "Must be at least 3 characters" },
    Label({ class: "input" }, [
      Span({ class: "label" }, "User"),
      Input({
        value: username,
        label: "Username",
        placeholder: "Username",
        oninput: (e) => username(e.target.value),
      }),
    ]),
  );
};
Mount(TooltipDemo, "#demo-tooltip");
```

### Error State

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-error" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const ErrorDemo = () => {
  const email = $("");

  return Div({ class: "form-control w-full max-w-xs" }, [
    Label({ class: "label" }, Span({ class: "label-text" }, "Email")),
    Div({ class: "relative w-full" }, [
      Input({
        type: "email",
        value: email,
        placeholder: "mail@site.com",
        class: "input input-bordered w-full pl-10 validator",
        required: true,
        oninput: (e) => email(e.target.value)
      }),
      Span({ class: "absolute left-3 top-1/2 -translate-y-1/2 text-base-content/60" }, 
        Icon("icon-[lucide--mail]")
      )
    ]),
    Div({ class: "validator-hint hidden" }, "Enter a valid email address")
  ]);
};
Mount(ErrorDemo, "#demo-error");
```

### Disabled State

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const DisabledDemo = () => {
  return Input({
    value: "john.doe",
    disabled: true,
  });
};
Mount(DisabledDemo, "#demo-disabled");
```

### All Variants

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
  </div>
</div>

```javascript
const VariantsDemo = () => {
  const text = $("");
  const number = $(0);

  return Div({ class: "flex flex-col gap-4" }, [
    Input({
      placeholder: "Type something...",
      value: text,
      oninput: (e) => text(e.target.value),
    }),
    Input({
      type: "number",
      value: number,
      oninput: (e) => number(parseInt(e.target.value) || 0),
    }),
    Input({
      type: "date",
      value: $("2024-01-01"),
    }),
    Input({ class: "input-primary", value: "Primary" }),
    Input({ class: "input-secondary", value: "Secondary" }),
    Input({ class: "input-accent", value: "Accent" }),
    Input({ class: "input-ghost", value: "Ghost" }),
    Input({ class: "input-info", value: "Info" }),
    Input({ class: "input-success", value: "Success" }),
    Input({ class: "input-warning", value: "Warning" }),
    Input({ class: "input-error", value: "Error" }),
  ]);
};
Mount(VariantsDemo, "#demo-variants");
```