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 = $('');
  const isValid = $(true);
  
  const validate = (value) => {
    const valid = value.includes('@') && value.includes('.');
    isValid(valid);
    email(value);
  };
  
  return Input({
    type: 'email',
    value: email,
    error: () => !isValid() && email() ? 'Invalid email address' : '',
    oninput: (e) => validate(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');