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 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 Floating Label

Wrap the input with Label() component:

Live Demo

const LabelDemo = () => {
  const email = $('');
  
  return Input({
      type: 'email',
      label: "Email",
      floating: true,
      value: email,
      placeholder: ' ',
      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' },
    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: 'w-full' }, [
    Input({
      type: 'email',
      value: email,
      placeholder: 'Enter your email',
      label: '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-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');