# Input

Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.


## Tag

`Input`

## Props

| Prop         | Type                         | Default    | Description                                      |
| :----------- | :--------------------------- | :--------- | :----------------------------------------------- |
| `label`      | `string`                     | `-`        | Label text (floating style)                      |
| `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                      |
| `tip`        | `string`                     | `-`        | Help tooltip text                                |
| `error`      | `string \| Signal<string>`   | `-`        | Error message to display                         |
| `disabled`   | `boolean \| Signal<boolean>` | `false`    | Disabled state                                   |
| `class`      | `string`                     | `''`       | Additional CSS classes (DaisyUI + Tailwind)      |
| `oninput`    | `function`                   | `-`        | Input event handler                              |

## 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 Tooltip

<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 Input({
    tip: 'Must be at least 3 characters',
    value: 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 max-w-md' }, [
    Input({
      type: 'email',
      value: email,
      placeholder: 'Enter your 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-link', value:"Link"}),
    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');
```