sigpro-ui/docs/components_old/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({
    label: 'Full Name',
    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({
    label: 'Email',
    type: 'email',
    icon: Icons.iconMail,
    value: email,
    oninput: (e) => email(e.target.value)
  });
};
Mount(IconDemo, '#demo-icon');

Password with Toggle

Live Demo

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

With Tooltip

Live Demo

const TooltipDemo = () => {
  const username = $('');
  
  return Input({
    label: 'Username',
    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({
    label: 'Email',
    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({
    label: 'Username',
    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({
      label: 'Text Input',
      placeholder: 'Type something...',
      value: text,
      oninput: (e) => text(e.target.value)
    }),
    Input({
      label: 'Number Input',
      type: 'number',
      value: number,
      oninput: (e) => number(parseInt(e.target.value) || 0)
    }),
    Input({
      label: 'Date Input',
      type: 'date',
      value: $('2024-01-01')
    })
  ]);
};
Mount(VariantsDemo, '#demo-variants');

<script> (function() { const initInputExamples = () => { // 1. Basic Input const basicTarget = document.querySelector('#demo-basic'); if (basicTarget && !basicTarget.hasChildNodes()) { const BasicDemo = () => { const name = $(''); return Input({ label: 'Full Name', placeholder: 'Enter your name', value: name, oninput: (e) => name(e.target.value) }); }; Mount(BasicDemo, basicTarget); } // 2. With Icon const iconTarget = document.querySelector('#demo-icon'); if (iconTarget && !iconTarget.hasChildNodes()) { const IconDemo = () => { const email = $(''); return Input({ label: 'Email', type: 'email', icon: Icons.iconMail, value: email, oninput: (e) => email(e.target.value) }); }; Mount(IconDemo, iconTarget); } // 3. Password with Toggle const passwordTarget = document.querySelector('#demo-password'); if (passwordTarget && !passwordTarget.hasChildNodes()) { const PasswordDemo = () => { const password = $(''); return Input({ label: 'Password', type: 'password', value: password, oninput: (e) => password(e.target.value) }); }; Mount(PasswordDemo, passwordTarget); } // 4. With Tooltip const tooltipTarget = document.querySelector('#demo-tooltip'); if (tooltipTarget && !tooltipTarget.hasChildNodes()) { const TooltipDemo = () => { const username = $(''); return Input({ label: 'Username', tip: 'Must be at least 3 characters', value: username, oninput: (e) => username(e.target.value) }); }; Mount(TooltipDemo, tooltipTarget); } // 5. Error State const errorTarget = document.querySelector('#demo-error'); if (errorTarget && !errorTarget.hasChildNodes()) { const ErrorDemo = () => { const email = $(''); const isValid = $(true); const validate = (value) => { const valid = value.includes('@') && value.includes('.'); isValid(valid); email(value); }; return Input({ label: 'Email', type: 'email', value: email, error: () => !isValid() && email() ? 'Invalid email address' : '', oninput: (e) => validate(e.target.value) }); }; Mount(ErrorDemo, errorTarget); } // 6. Disabled State const disabledTarget = document.querySelector('#demo-disabled'); if (disabledTarget && !disabledTarget.hasChildNodes()) { const DisabledDemo = () => { return Input({ label: 'Username', value: 'john.doe', disabled: true }); }; Mount(DisabledDemo, disabledTarget); } // 7. All Variants const variantsTarget = document.querySelector('#demo-variants'); if (variantsTarget && !variantsTarget.hasChildNodes()) { const VariantsDemo = () => { const text = $(''); const number = $(0); return Div({ class: 'flex flex-col gap-4' }, [ Input({ label: 'Text Input', placeholder: 'Type something...', value: text, oninput: (e) => text(e.target.value) }), Input({ label: 'Number Input', type: 'number', value: number, oninput: (e) => number(parseInt(e.target.value) || 0) }), Input({ label: 'Date Input', type: 'date', value: $('2024-01-01') }) ]); }; Mount(VariantsDemo, variantsTarget); } }; initInputExamples(); if (window.$docsify) { window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => { hook.doneEach(initInputExamples); }); } })(); </script>