sigpro-ui/docs/demo_forms.md

Forms

Autocomplete

const selected = $('');
const items = ['Apple', 'Banana', 'Orange', 'Mango', 'Carrot', 'Broccoli', 'Spinach', 'Potato'];

mount(
  Autocomplete({
    items,
    value: selected,
    placeholder: 'Search...',
    onselect: (val) => console.log('Selected:', val)
  }),
  '#demo-autocomplete'
);

Button

const count = $(0);

mount(
  Button({
    class: 'btn-primary',
    onclick: () => count(count() + 1)
  }, () => `Clicked ${count()} times`),
  '#demo-button'
);

Checkbox

const checked = $(false);

mount(
  div({ class: 'flex items-center gap-2' }, [
    Checkbox({
      checked,
      onchange: (e) => checked(e.target.checked),
    }),
    span({}, 'Accept terms')
  ]),
  '#demo-checkbox'
);

Colorpicker

const color = $('');

mount(
  Colorpicker({
    value: color,
    label: 'Pick a color',
    onchange: (c) => console.log('Color:', c)
  }),
  '#demo-colorpicker'
);

Datepicker

const date = $('');

mount(
  Datepicker({
    value: date,
    placeholder: 'Select date',
    onChange: (val) => console.log('Date:', val)
  }),
  '#demo-datepicker'
);

Input

const text = $('');

mount(
  Input({
    type: 'text',
    label: 'Username',
    float: true,
    value: text,
    left: Icon('icon-[lucide--user]')
  }),
  '#demo-input'
);

Radio

const option = $('');

mount(
  div({ class: 'flex gap-2' }, [
    Radio({ name: 'option', value: 'a', checked: () => option() === 'a', onchange: () => option('a') }),
    Radio({ name: 'option', value: 'b', checked: () => option() === 'b', onchange: () => option('b') }),
  ]),
  '#demo-radio'
);

Range

const rangeValue = $(50);

mount(
  div({ class: 'flex flex-col gap-2' }, [
    Range({ min: 0, max: 100, value: rangeValue, oninput: (e) => rangeValue(+e.target.value) }),
    span({}, () => `Value: ${rangeValue()}`)
  ]),
  '#demo-range'
);

Rating

const stars = $('');

mount(
  Rating({
    value: stars,
    count: 5,
    mask: 'mask-star',
    onchange: (v) => console.log('Rated:', v)
  }),
  '#demo-rating'
);

Select

const choice = $('');

mount(
  Select({
    items: ['Option 1', 'Option 2', 'Option 3'],
    placeholder: 'Choose...',
    value: choice,
  }),
  '#demo-select'
);

Swap

const swapOn = $(false);

mount(
  Swap({
    value: swapOn,
    on: span({ class: 'text-success' }, 'ON'),
    off: span({ class: 'text-error' }, 'OFF'),
  }),
  '#demo-swap'
);