sigpro-ui/docs/components/input.md

Input

Form input component with floating label, icons, password toggle, tooltip, and error states. Fully integrated with DaisyUI and Tailwind.

Tag

Input

Props

Prop	Type	Default	Description
label	string	-	Label text (floating style)
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
tip	string	-	Help tooltip text
error	string | Signal<string>	-	Error message to display
disabled	boolean | Signal<boolean>	false	Disabled state
class	string	''	Additional CSS classes (DaisyUI + Tailwind)
oninput	function	-	Input event handler

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 Input({
    type: 'email',
    icon: "✉️",
    value: email,
    oninput: (e) => email(e.target.value)
  });
};
Mount(IconDemo, '#demo-icon');

Password with Toggle

Live Demo

const PasswordDemo = () => {
  const password = $('');
  
  return Input({
    type: 'password',
    value: password,
    oninput: (e) => password(e.target.value)
  });
};
Mount(PasswordDemo, '#demo-password');

With Tooltip

Live Demo

const TooltipDemo = () => {
  const username = $('');
  
  return Input({
    tip: 'Must be at least 3 characters',
    value: username,
    oninput: (e) => username(e.target.value)
  });
};
Mount(TooltipDemo, '#demo-tooltip');

Error State

Live Demo

const ErrorDemo = () => {
  const email = $('');
  
  return Div({ class: 'w-full max-w-md' }, [
    Input({
      type: 'email',
      value: email,
      placeholder: 'Enter your 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

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-link', value:"Link"}),
    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');