sigpro-ui/docs/components/input.md

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

Live Demo

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.

Live Demo

const { InputLabel, Div, Icon, mount } = window;

const IconDemo = () => {
  const email = $("");
  return div({ class: "input input-bordered flex items-center gap-2" }, [
    Icon("✉️"),
    h("input", {
      class: "grow",
      type: "email",
      value: email,
      placeholder: "Email",
      oninput: (e) => email(e.target.value)
    })
  ]);
};
mount(IconDemo, "#demo-icon");

Password with Toggle

Live Demo

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]"),
    h("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.

Live Demo

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.

Live Demo

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.

Live Demo

const { Input, Div, mount } = window;

const ErrorDemo = () => {
  const email = $("");
  const isValid = () => email().includes("@");
  return div({ class: "flex flex-col gap-2" }, [
    h("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

Live Demo

const { Input, mount } = window;

const DisabledDemo = () => {
  return input({ value: "john.doe", disabled: true });
};
mount(DisabledDemo, "#demo-disabled");

All Variants

Live Demo

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");