247 lines
7.2 KiB
Markdown
247 lines
7.2 KiB
Markdown
# 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');
|
|
``` |