# Input

Form input component with icons, password toggle, and validation.

## 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                                 |
| `disabled`    | `boolean \| Signal<boolean>` | `false`  | Disabled state                                   |
| `class`       | `string`                     | `''`     | Additional CSS classes (DaisyUI + Tailwind)      |
| `oninput`     | `function`                   | `-`      | Input event handler                              |

## 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"></div>
  </div>
</div>

```js
const { Input, mount } = window;

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

### With Icon

Wrap the input inside a `Div` with class `input` and add an icon as a sibling.

<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"></div>
  </div>
</div>

```js
const { InputLabel, Div, Icon, mount } = window;

const IconDemo = () => {
  const email = $("");
  return div({ class: "input input-bordered flex items-center gap-2" }, [
    Icon("✉️"),
    h("input", {
      class: "grow",
      type: "email",
      value: email,
      placeholder: "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"></div>
  </div>
</div>

```js
const { Input, Div, Icon, Swap, mount } = window;

const PasswordDemo = () => {
  const password = $("");
  const visible = $(false);
  return div({ class: "input input-bordered flex items-center gap-2" }, [
    Icon("icon-[lucide--lock]"),
    h("input", {
      type: () => (visible() ? "text" : "password"),
      value: password,
      placeholder: "Password",
      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

Use a wrapper `Div` with class `floating-label`.

<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"></div>
  </div>
</div>

```js
const { Input, Div, Span, mount } = window;

const LabelDemo = () => {
  const email = $("");
  return div({ class: "floating-label" }, [
    span("Email"),
    input({
      type: "email",
      value: email,
      placeholder: " ",
      oninput: (e) => email(e.target.value)
    })
  ]);
};
mount(LabelDemo, "#demo-label");
```

### With Tooltip

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"></div>
  </div>
</div>

```js
const { Input, Tooltip, mount } = window;

const TooltipDemo = () => {
  const username = $("");
  return Tooltip({ tip: "Must be at least 3 characters" }, [
    input({
      placeholder: "Username",
      value: username,
      oninput: (e) => username(e.target.value)
    })
  ]);
};
mount(TooltipDemo, "#demo-tooltip");
```

### Error State

Add `input-error` class and show a validation message.

<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"></div>
  </div>
</div>

```js
const { Input, Div, mount } = window;

const ErrorDemo = () => {
  const email = $("");
  const isValid = () => email().includes("@");
  return div({ class: "flex flex-col gap-2" }, [
    h("input", {
      type: "email",
      class: () => `input input-bordered ${email() && !isValid() ? "input-error" : ""}`,
      value: email,
      placeholder: "mail@example.com",
      oninput: (e) => email(e.target.value)
    }),
    () => email() && !isValid() ? div({ class: "text-error text-sm" }, "Enter a valid email") : null
  ]);
};
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"></div>
  </div>
</div>

```js
const { Input, mount } = window;

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"></div>
  </div>
</div>

```js
const { Input, Div, mount } = window;

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