natxocc
5a5f593025
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 4s
255 lines
8.0 KiB
Markdown
255 lines
8.0 KiB
Markdown
# 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("✉️"),
|
|
Tag("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]"),
|
|
Tag("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" }, [
|
|
Tag("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");
|
|
```
|