# 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 Input({
    type: 'email',
    icon: "✉️",
    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 = $('');
  
  return Input({
    type: 'password',
    value: password,
    oninput: (e) => password(e.target.value)
  });
};
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 Input({
      type: 'email',
      label: "Email",
      floating: true,
      value: email,
      placeholder: ' ',
      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' },
    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: 'w-full' }, [
    Input({
      type: 'email',
      value: email,
      placeholder: 'Enter your email',
      label: 'Email',
      icon: 'icon-[lucide--mail]',
      validate: (value) => {
        if (!value) return '';
        if (!value.includes('@')) return 'Email must contain @';
        if (!value.includes('.')) return 'Email must contain .';
        return '';
      },
      oninput: (e) => email(e.target.value)
    })
  ]);
};
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');
```