natxocc
16afea2768
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
270 lines
8.4 KiB
Markdown
270 lines
8.4 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 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");
|
|
```
|