sigpro-ui/docs/components_old/checkbox.md

Checkbox

Toggle checkbox component with label, tooltip support, and reactive state management.

Tag

Checkbox

Props

Prop	Type	Default	Description
label	string	-	Label text for the checkbox
value	boolean | Signal<boolean>	false	Checked state
tooltip	string	-	Tooltip text on hover
toggle	boolean	false	Display as toggle switch instead of checkbox
disabled	boolean | Signal<boolean>	false	Disabled state
class	string	''	Additional CSS classes (DaisyUI + Tailwind)
onclick	function	-	Click event handler

Live Examples

Basic Checkbox

Live Demo

const BasicDemo = () => {
  const accepted = $(false);
  
  return Checkbox({
    label: 'I accept the terms and conditions',
    value: accepted,
    onclick: () => accepted(!accepted())
  });
};
Mount(BasicDemo, '#demo-basic');

Toggle Switch

Live Demo

const ToggleDemo = () => {
  const enabled = $(false);
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Checkbox({
      label: 'Enable notifications',
      value: enabled,
      toggle: true,
      onclick: () => enabled(!enabled())
    }),
    () => enabled() 
      ? Div({ class: 'alert alert-success' }, 'Notifications are ON')
      : Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
  ]);
};
Mount(ToggleDemo, '#demo-toggle');

With Tooltip

Live Demo

const TooltipDemo = () => {
  const darkMode = $(false);
  
  return Checkbox({
    label: 'Dark mode',
    value: darkMode,
    tooltip: 'Enable dark theme preference',
    onclick: () => darkMode(!darkMode())
  });
};
Mount(TooltipDemo, '#demo-tooltip');

Disabled State

Live Demo

const DisabledDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
    Checkbox({
      label: 'Checked and disabled',
      value: true,
      disabled: true
    }),
    Checkbox({
      label: 'Unchecked and disabled',
      value: false,
      disabled: true
    })
  ]);
};
Mount(DisabledDemo, '#demo-disabled');

Reactive Multiple Selection

Live Demo

const MultipleDemo = () => {
  const options = [
    { id: 1, label: 'Option 1', selected: $(false) },
    { id: 2, label: 'Option 2', selected: $(false) },
    { id: 3, label: 'Option 3', selected: $(false) }
  ];
  
  const selectAll = $(false);
  
  const toggleAll = (value) => {
    selectAll(value);
    options.forEach(opt => opt.selected(value));
  };
  
  const updateSelectAll = () => {
    const allSelected = options.every(opt => opt.selected());
    selectAll(allSelected);
  };
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Checkbox({
      label: 'Select all',
      value: selectAll,
      onclick: () => toggleAll(!selectAll())
    }),
    Div({ class: 'divider my-1' }),
    ...options.map(opt => Checkbox({
      label: opt.label,
      value: opt.selected,
      onclick: () => {
        opt.selected(!opt.selected());
        updateSelectAll();
      }
    })),
    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
      const count = options.filter(opt => opt.selected()).length;
      return `${count} of ${options.length} selected`;
    })
  ]);
};
Mount(MultipleDemo, '#demo-multiple');

All Variants

Live Demo

const VariantsDemo = () => {
  const variant1 = $(true);
  const variant2 = $(false);
  const variant3 = $(true);
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Div({ class: 'flex items-center gap-4' }, [
      Checkbox({
        label: 'Primary',
        value: variant1,
        class: 'checkbox-primary',
        onclick: () => variant1(!variant1())
      }),
      Checkbox({
        label: 'Secondary',
        value: variant2,
        class: 'checkbox-secondary',
        onclick: () => variant2(!variant2())
      })
    ]),
    Div({ class: 'flex items-center gap-4' }, [
      Checkbox({
        label: 'Accent',
        value: variant3,
        class: 'checkbox-accent',
        onclick: () => variant3(!variant3())
      }),
      Checkbox({
        label: 'Toggle switch',
        value: $(false),
        toggle: true,
        class: 'toggle-primary'
      })
    ])
  ]);
};
Mount(VariantsDemo, '#demo-variants');

Form Example

Live Demo

const FormDemo = () => {
  const subscribe = $(false);
  const weekly = $(false);
  const monthly = $(true);
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
    Checkbox({
      label: 'Subscribe to newsletter',
      value: subscribe,
      onclick: () => subscribe(!subscribe())
    }),
    () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
      Checkbox({
        label: 'Weekly updates',
        value: weekly,
        onclick: () => weekly(!weekly())
      }),
      Checkbox({
        label: 'Monthly digest',
        value: monthly,
        onclick: () => monthly(!monthly())
      })
    ]) : null,
    () => subscribe() && (weekly() || monthly())
      ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
      : subscribe()
      ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
      : null
  ]);
};
Mount(FormDemo, '#demo-form');

<script> (function() { const initCheckboxExamples = () => { // 1. Basic Checkbox const basicTarget = document.querySelector('#demo-basic'); if (basicTarget && !basicTarget.hasChildNodes()) { const BasicDemo = () => { const accepted = $(false); return Checkbox({ label: 'I accept the terms and conditions', value: accepted, onclick: () => accepted(!accepted()) }); }; Mount(BasicDemo, basicTarget); } // 2. Toggle Switch const toggleTarget = document.querySelector('#demo-toggle'); if (toggleTarget && !toggleTarget.hasChildNodes()) { const ToggleDemo = () => { const enabled = $(false); return Div({ class: 'flex flex-col gap-4 w-full' }, [ Checkbox({ label: 'Enable notifications', value: enabled, toggle: true, onclick: () => enabled(!enabled()) }), () => enabled() ? Div({ class: 'alert alert-success' }, 'Notifications are ON') : Div({ class: 'alert alert-soft' }, 'Notifications are OFF') ]); }; Mount(ToggleDemo, toggleTarget); } // 3. With Tooltip const tooltipTarget = document.querySelector('#demo-tooltip'); if (tooltipTarget && !tooltipTarget.hasChildNodes()) { const TooltipDemo = () => { const darkMode = $(false); return Checkbox({ label: 'Dark mode', value: darkMode, tooltip: 'Enable dark theme preference', onclick: () => darkMode(!darkMode()) }); }; Mount(TooltipDemo, tooltipTarget); } // 4. Disabled State const disabledTarget = document.querySelector('#demo-disabled'); if (disabledTarget && !disabledTarget.hasChildNodes()) { const DisabledDemo = () => { return Div({ class: 'flex flex-col gap-3' }, [ Checkbox({ label: 'Checked and disabled', value: true, disabled: true }), Checkbox({ label: 'Unchecked and disabled', value: false, disabled: true }) ]); }; Mount(DisabledDemo, disabledTarget); } // 5. Reactive Multiple Selection const multipleTarget = document.querySelector('#demo-multiple'); if (multipleTarget && !multipleTarget.hasChildNodes()) { const MultipleDemo = () => { const options = [ { id: 1, label: 'Option 1', selected: $(false) }, { id: 2, label: 'Option 2', selected: $(false) }, { id: 3, label: 'Option 3', selected: $(false) } ]; const selectAll = $(false); const toggleAll = (value) => { selectAll(value); options.forEach(opt => opt.selected(value)); }; const updateSelectAll = () => { const allSelected = options.every(opt => opt.selected()); selectAll(allSelected); }; return Div({ class: 'flex flex-col gap-3' }, [ Checkbox({ label: 'Select all', value: selectAll, onclick: () => toggleAll(!selectAll()) }), Div({ class: 'divider my-1' }), ...options.map(opt => Checkbox({ label: opt.label, value: opt.selected, onclick: () => { opt.selected(!opt.selected()); updateSelectAll(); } })), Div({ class: 'mt-2 text-sm opacity-70' }, () => { const count = options.filter(opt => opt.selected()).length; return `${count} of ${options.length} selected`; }) ]); }; Mount(MultipleDemo, multipleTarget); } // 6. All Variants const variantsTarget = document.querySelector('#demo-variants'); if (variantsTarget && !variantsTarget.hasChildNodes()) { const VariantsDemo = () => { const variant1 = $(true); const variant2 = $(false); const variant3 = $(true); return Div({ class: 'flex flex-col gap-3' }, [ Div({ class: 'flex items-center gap-4' }, [ Checkbox({ label: 'Primary', value: variant1, class: 'checkbox-primary', onclick: () => variant1(!variant1()) }), Checkbox({ label: 'Secondary', value: variant2, class: 'checkbox-secondary', onclick: () => variant2(!variant2()) }) ]), Div({ class: 'flex items-center gap-4' }, [ Checkbox({ label: 'Accent', value: variant3, class: 'checkbox-accent', onclick: () => variant3(!variant3()) }), Checkbox({ label: 'Toggle switch', value: $(false), toggle: true, class: 'toggle-primary' }) ]) ]); }; Mount(VariantsDemo, variantsTarget); } // 7. Form Example const formTarget = document.querySelector('#demo-form'); if (formTarget && !formTarget.hasChildNodes()) { const FormDemo = () => { const subscribe = $(false); const weekly = $(false); const monthly = $(true); return Div({ class: 'flex flex-col gap-4' }, [ Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'), Checkbox({ label: 'Subscribe to newsletter', value: subscribe, onclick: () => subscribe(!subscribe()) }), () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [ Checkbox({ label: 'Weekly updates', value: weekly, onclick: () => weekly(!weekly()) }), Checkbox({ label: 'Monthly digest', value: monthly, onclick: () => monthly(!monthly()) }) ]) : null, () => subscribe() && (weekly() || monthly()) ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!') : subscribe() ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency') : null ]); }; Mount(FormDemo, formTarget); } }; initCheckboxExamples(); if (window.$docsify) { window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => { hook.doneEach(initCheckboxExamples); }); } })(); </script>