sigpro-ui/docs/components/input.md

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

Live Demo

const BasicDemo = () => {
  const name = $("");

  return Input({
    placeholder: "Enter your name",
    value: name,
    oninput: (e) => name(e.target.value),
  });
};
Mount(BasicDemo, "#demo-basic");

With Icon

Live Demo

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

Live Demo

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:

Live Demo

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:

Live Demo

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

Live Demo

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

Live Demo

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

All Variants

Live Demo

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